/* --- Premium Variables & General Styling --- */
    :root {
        --primary-color: #d32f2f;
        --primary-glow: rgba(211, 47, 47, 0.4);
        --dark-navy: #080C10;
        --light-navy: #111820;
        --slate: #9BA8B9;
        --light-slate: #EEF2F8;
        --white: #EEF2F8;
        --font-heading: 'Barlow Condensed', sans-serif;
        --font-body: 'DM Sans', sans-serif;
        --border-radius: 8px;
        --transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
        --section-padding: 5rem 5%;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
        font-family: var(--font-body);
        line-height: 1.6;
        background-color: var(--dark-navy);
        color: var(--slate);
        overflow-x: hidden;
    }
    body::before{content:'';position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none;
      background-image:linear-gradient(rgba(211,47,47,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(211,47,47,.03) 1px,transparent 1px);
      background-size:60px 60px}
    .container { max-width: 1100px; margin: 0 auto; padding: 0 2rem; }
    section { padding: var(--section-padding); position: relative; z-index: 1; }
    .section-title { text-align: center; font-family: var(--font-heading); font-size: 2.8rem; margin-bottom: 1rem; font-weight: 700; color: var(--white); }
    .section-subtitle { text-align: center; font-size: 1.1rem; color: var(--slate); margin-bottom: 4rem; max-width: 600px; margin-left: auto; margin-right: auto; }

    /* ======================= NAVBAR ======================= */
    .navbar { background: transparent; padding: 1.5rem 5%; position: fixed; width: 100%; top: 0; z-index: 1000; transition: all 0.3s ease-in-out; }
    .navbar.scrolled { background: rgba(10, 25, 47, 0.85); backdrop-filter: blur(10px); padding: 0.8rem 5%; box-shadow: 0 5px 20px rgba(0,0,0,0.5); }
    .navbar-container { display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto; }
    .navbar-logo { color: var(--white); font-size: 1.8rem; font-weight: 700; text-decoration: none; }
    .navbar-menu { display: flex; align-items: center; list-style: none; gap: 2rem; }
    .navbar-link { color: var(--light-slate); text-decoration: none; transition: var(--transition); }
    .navbar-link:hover, .navbar-link.active { color: var(--primary-color); }
    .call-now-button { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1.2rem; border: 1px solid var(--primary-color); border-radius: var(--border-radius); color: var(--primary-color); text-decoration: none; transition: var(--transition); }
    .call-now-button:hover { background-color: var(--primary-glow); box-shadow: 0 0 15px var(--primary-glow); }
    .hamburger { display: none; color: var(--white); font-size: 1.8rem; cursor: pointer; }
    
    /* ======================= PAGE HEADER ======================= */
    .page-header {
        padding-top: 12rem;
        padding-bottom: 4rem;
        background: linear-gradient(rgba(10, 25, 47, 0.8), rgba(10, 25, 47, 1)), url('/assets/images/mechanic.jpg') no-repeat center center/cover;
        text-align: center;
    }
    .page-header h1 { font-size: 3.5rem; color: var(--white); margin-bottom: 0.5rem; }
    .page-header p { font-size: 1.2rem; color: var(--light-slate); }
    
    /* ======================= CONTACT LAYOUT ======================= */
    .contact-layout {
        display: grid;
        grid-template-columns: 1fr 1.5fr;
        gap: 4rem;
        align-items: flex-start;
    }

    /* ======================= CONTACT INFO SIDE ======================= */
    .contact-info h3 {
        font-size: 1.8rem;
        color: var(--white);
        margin-bottom: 2rem;
    }
    .info-item {
        display: flex;
        align-items: flex-start;
        gap: 1.5rem;
        margin-bottom: 2rem;
    }
    .info-item i {
        font-size: 1.5rem;
        color: var(--primary-color);
        margin-top: 5px;
    }
    .info-item h4 {
        color: var(--white);
        font-size: 1.1rem;
        margin-bottom: 0.25rem;
    }
    .info-item p, .info-item a {
        color: var(--slate);
        text-decoration: none;
        transition: var(--transition);
    }
    .info-item a:hover {
        color: var(--primary-color);
    }
    .map-container iframe {
        border-radius: var(--border-radius);
        border: 1px solid #1d2d44;
        width: 100%;
        height: 250px;
    }

    /* ======================= CONTACT FORM SIDE ======================= */
    .contact-form-container {
        background-color: var(--light-navy);
        padding: 3rem;
        border-radius: var(--border-radius);
        border: 1px solid #1d2d44;
    }
    .contact-form-container h3 {
        font-size: 1.8rem;
        color: var(--white);
        margin-bottom: 2rem;
        text-align: center;
    }
    .contact-form-container form { display: flex; flex-direction: column; gap: 1.5rem; }
    .contact-form-container label { color: var(--light-slate); font-weight: 600; margin-bottom: -0.5rem; }
    .contact-form-container input, .contact-form-container select, .contact-form-container textarea { width: 100%; padding: 1rem; background-color: var(--dark-navy); border: 1px solid #1d2d44; border-radius: var(--border-radius); color: var(--white); font-family: var(--font-family); font-size: 1rem; transition: var(--transition); }
    .contact-form-container input:focus, .contact-form-container select:focus, .contact-form-container textarea:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px var(--primary-glow); }
    .cta-button { display: inline-block; padding: 1rem 2.5rem; border-radius: var(--border-radius); text-decoration: none; font-weight: 600; font-size: 1.1rem; transition: var(--transition); position: relative; overflow: hidden; background-color: var(--primary-color); color: var(--dark-navy); border: 1px solid var(--primary-color); box-shadow: 0 0 20px var(--primary-glow); cursor: pointer; }
    .cta-button:hover { transform: translateY(-3px); box-shadow: 0 0 30px var(--primary-color); }

    /* ======================= FOOTER ======================= */
    .main-footer { background-color: var(--dark-navy); padding: 4rem 5% 2rem; border-top: 1px solid var(--light-navy); }
    .footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 3rem; margin-bottom: 3rem; text-align: center; }
    .footer-section h4 { color: var(--white); font-size: 1.2rem; margin-bottom: 1rem; }
    .footer-section a { color: var(--slate); text-decoration: none; display: block; margin-bottom: 0.5rem; transition: var(--transition); }
    .footer-section a:hover { color: var(--primary-color); }
    .trust-badges { display: flex; gap: 1rem; justify-content: center; }
    .trust-badges img { height: 40px; filter: grayscale(100%) brightness(1.5); }
    .footer-bottom { text-align: center; border-top: 1px solid #1d2d44; padding-top: 2rem; }
    .social-links { margin-top: 1rem; }
    .social-links a { color: var(--slate); font-size: 1.5rem; margin: 0 0.5rem; }
    .social-links a:hover { color: var(--primary-color); }
    
    /* ======================= RESPONSIVE DESIGN ======================= */
    @media (max-width: 992px) {
        .contact-layout { grid-template-columns: 1fr; }
    }
    @media (max-width: 768px) {
        .navbar-menu { display: none; position: absolute; top: 100%; left: 0; width: 100%; flex-direction: column; background-color: var(--light-navy); text-align: center; padding: 2rem 0; gap: 1.5rem; }
        .navbar-menu.active { display: flex; }
        .hamburger { display: block; }
        .page-header h1 { font-size: 2.5rem; }
        @media (min-width: 768px) { .trust-badges { justify-content: flex-start; } .footer-content { text-align: left; } }
    }

    /* Index-style MechWay navbar spacing */

    .navbar-logo, .nav-logo { display: inline-flex !important; align-items: center; flex-shrink: 0; min-width: 64px; }
    .navbar-logo img, .nav-logo img { object-fit: contain; max-width: 150px; }
    .navbar { padding: .35rem 5% !important; min-height: 42px; }
    .navbar.scrolled { padding: .2rem 5% !important; }
    .navbar-container, .nav-inner { max-width: 1200px; margin: 0 auto; }
    .navbar-logo img, .nav-logo img { height: 5rem !important; width: auto; border-radius: 16px; display: block; transition: height .3s ease; }
    .navbar.scrolled .navbar-logo img, .navbar.scrolled .nav-logo img { height: 4.25rem !important; }
    @media (max-width: 768px) {
      .navbar { padding: .3rem 5% !important; }
      .navbar-logo img, .nav-logo img { height: 4rem !important; }
      .navbar.scrolled .navbar-logo img, .navbar.scrolled .nav-logo img { height: 3.5rem !important; }
    }
  

    /* Shared shop-style footer */
    .mw-footer {
      --mw-footer-bg: #080C10;
      --mw-footer-panel: #111820;
      --mw-footer-border: rgba(255,255,255,0.08);
      --mw-footer-text: #9BA8B9;
      --mw-footer-soft: #EEF2F8;
      --mw-footer-accent: #d32f2f;
      background: var(--mw-footer-bg);
      border-top: 1px solid var(--mw-footer-border);
      padding: 4rem 5% 0;
      color: var(--mw-footer-text);
    }
    .mw-footer .mw-footer-container { max-width: 1240px; margin: 0 auto; }
    .mw-footer .mw-footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 3rem; padding-bottom: 3rem; }
    .mw-footer .mw-footer-logo { display: inline-flex; align-items: center; margin-bottom: 1rem; }
    .mw-footer .mw-footer-logo img { height: 4.25rem; width: auto; border-radius: 14px; display: block; }
    .mw-footer .mw-footer-brand p { font-size: .9rem; color: var(--mw-footer-text); line-height: 1.7; max-width: 280px; }
    .mw-footer .mw-footer-social { display: flex; gap: .75rem; margin-top: 1.5rem; }
    .mw-footer .mw-footer-social a { width: 38px; height: 38px; border-radius: 8px; background: var(--mw-footer-panel); border: 1px solid var(--mw-footer-border); color: var(--mw-footer-text); font-size: .95rem; display: flex; align-items: center; justify-content: center; transition: all .25s; text-decoration: none; }
    .mw-footer .mw-footer-social a:hover { background: var(--mw-footer-accent); border-color: var(--mw-footer-accent); color: #fff; transform: translateY(-2px); }
    .mw-footer .mw-footer-col h5 { color: var(--mw-footer-soft); font-size: .9rem; font-weight: 700; letter-spacing: 0; text-transform: uppercase; margin-bottom: 1.2rem; }
    .mw-footer .mw-footer-col a { display: block; color: var(--mw-footer-text); font-size: .88rem; text-decoration: none; margin-bottom: .6rem; transition: color .2s; }
    .mw-footer .mw-footer-col a:hover { color: var(--mw-footer-accent); }
    .mw-footer .mw-footer-contact-item { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: .8rem; }
    .mw-footer .mw-footer-contact-item i { color: var(--mw-footer-accent); font-size: .9rem; margin-top: .1rem; flex-shrink: 0; }
    .mw-footer .mw-footer-contact-item span { font-size: .88rem; color: var(--mw-footer-text); line-height: 1.5; }
    .mw-footer .mw-footer-contact-item a { color: inherit; text-decoration: none; }
    .mw-footer .mw-footer-bottom { border-top: 1px solid var(--mw-footer-border); padding: 1.5rem 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
    .mw-footer .mw-footer-bottom p { font-size: .82rem; color: var(--mw-footer-text); margin: 0; }
    .mw-footer .mw-footer-badges { display: flex; gap: .8rem; flex-wrap: wrap; }
    .mw-footer .mw-footer-badge { padding: .35rem .8rem; background: var(--mw-footer-panel); border: 1px solid var(--mw-footer-border); border-radius: 8px; font-size: .75rem; font-weight: 700; color: var(--mw-footer-soft); letter-spacing: 0; }
    @media (max-width: 1024px) { .mw-footer .mw-footer-grid { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 768px) { .mw-footer .mw-footer-grid { grid-template-columns: 1fr; gap: 2rem; } .mw-footer .mw-footer-bottom { flex-direction: column; text-align: center; } .mw-footer .mw-footer-logo img { height: 3.5rem; } }

  
.inline-contact-1 { height:4rem;width:auto;border-radius:14px;display:block }
.inline-contact-2 { border:0; }

/* Contact form layout on the shared light theme. */
.contact-form-container h3 { margin-bottom: 22px; text-align: left; }
#general-contact-form { display: block; }
.contact-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.contact-field { min-width: 0; }
.contact-field-wide { grid-column: 1 / -1; }
#general-contact-form .contact-field label { display: block; margin: 0 0 8px; color: #344054; font-size: 13px; font-weight: 700; }
#general-contact-form .contact-field label span { color: #c62828; }
#general-contact-form input, #general-contact-form textarea {
  display: block; width: 100%; margin: 0; padding: 12px 14px; background: #fff;
  border: 1px solid #cbd5df; border-radius: 6px; color: #182230;
  font-family: var(--font-body); font-size: 15px; line-height: 1.5; box-shadow: none;
}
#general-contact-form input { min-height: 48px; }
#general-contact-form textarea { min-height: 132px; resize: vertical; }
#general-contact-form input::placeholder, #general-contact-form textarea::placeholder { color: #667085; }
#general-contact-form input:focus-visible, #general-contact-form textarea:focus-visible {
  outline: 3px solid #fecdca; outline-offset: 1px; border-color: #d92d20; box-shadow: none;
}
#general-contact-form .cta-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-width: 180px; min-height: 48px; margin-top: 22px; padding: 12px 20px;
  border-radius: 6px; background: #d92d20; color: #fff; font-size: 14px;
  font-weight: 700; box-shadow: none; transform: none;
}
#general-contact-form .cta-button:hover { background: #b42318; box-shadow: none; transform: none; }
#general-contact-form .cta-button:disabled { opacity: .6; cursor: wait; }
.contact-form-status { margin-top: 16px; padding: 12px 14px; border-radius: 6px; font-size: 13px; line-height: 1.5; }
.contact-form-status.success { background: #edf8f0; color: #176c38; }
.contact-form-status.error { background: #fff1f1; color: #a01c22; }
@media (max-width: 640px) {
  .contact-form-grid { grid-template-columns: 1fr; gap: 18px; }
  .contact-field-wide { grid-column: auto; }
  #general-contact-form .cta-button { width: 100%; }
}