/* General styles */
body {
  /* background-image: url(photos/banner5.png); */
  background-color:rgb(0, 0, 0);
  background-repeat: repeat-y;
  background-position: center top;
  margin: 0;
  font-family: Arial, sans-serif;

}
#disclaimer {
  color:#b8afae;
    font-size:.7em;
}

 /* @font-face {
  font-family: 'Orbitron'; 
  src: url('./fonts/SixtyfourConvergence-Regular-VariableFont_BLED,SCAN,XELA,YELA.ttf') format('truetype'); 
  font-weight: normal; 
  font-style: normal; 
}  */


h1 {
  font-family: Orbitron;
  font-weight: 600;
  color: #0116b2;
  text-align: center;
  margin-top: 40px;
}

h2 {
  font-size:2em;
  /* color: rgb(11, 2, 176); */
  color:#00ff66;
  text-align: center;
  font-family: Orbitron;
  font-weight: 600;
  text-shadow: 0 0 100px rgb(56, 7, 252), 
               0 0 20px rgb(56, 7, 252), 
               0 0 30px rgb(56, 7, 252);
}

h3 {
  text-align: center;
  color: rgb(46, 2, 206);
  font-size: 1.5rem;
}

p {
  color: #17a24f;
  font-weight: bold;
  font-size: 1rem;
}

ul {
  list-style-type: disc;
  padding-left: 20px;
}


li { color: #b8afae; }


#mission {
  line-height: 1.5;
  color: #17a24f;
  font-weight: bold;
  font-size: 1.5rem;
}
.about p {
  text-align: center;
  font-size: 1.2rem;
  line-height: 1.5;
}

.about h2 {
  font-size: 2rem; 
}

#tiers {
  color:#00ff66;
  text-shadow: 0 0 100px rgb(56, 7, 252), 
               0 0 20px rgb(56, 7, 252), 
               0 0 30px rgb(56, 7, 252);
}

.note {
  color: #17a24f;
  font-style: italic;
}



/* Navbar */
.navbar {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 2em;
  padding-bottom: 20px;
}

.navbutton {
  --c: rgb(3, 2, 2);
  background: linear-gradient(90deg, hsla(120, 88%, 43%, 0) 33%, rgba(15, 25, 163, 0.333), #0000 67%) var(--_p, 100%) / 300% no-repeat, #b8afae;
  color: rgba(158, 84, 84, 0);
  border: none;
  transform: perspective(500px) rotateY(calc(8deg * var(--_i, -1)));
  text-shadow: calc(var(--_i, -1) * 0.08em) -0.01em 0 var(--c), calc(var(--_i, -1) * -0.03em) 0.01em 1px rgba(162, 9, 192, 0.568);
  outline-offset: 0.1em;
  transition: 0.3s;
  border-radius: 10px;
  font-weight: bold;
  font-size: 1.3rem;
  padding: 0.5em 1em;
  cursor: pointer;
}

.navbutton:hover,
.navbutton:focus-visible {
  --_p: 0%;
  --_i: 1;
}

.navbutton:active {
  text-shadow: none;
  color: var(--c);
  box-shadow: inset 0 0 9px #0005;
  transition: 0s;
}

/* Header */
#topcontainer {
  position: relative;
  text-align: center;
  height: auto;
  width: 100%;
}



#titlebanner {
  font-family: Orbitron;
  background-color: rgb(0, 0, 0);
  padding-top: 3em;
  background-size: cover;
  background-position: center;
  text-align: center;
  overflow: hidden; /* Ensures the container clips the transformation effects */
  position: relative; /* Prepares for potential animation additions */
}

#logomain{
height: 347px;
width:400px;

}
#logo {
  text-shadow: 0 0 10px rgb(162, 9, 192), 
               0 0 20px rgb(162, 9, 192), 
               0 0 30px rgb(162, 9, 192); /* Glow effect */
          
  font-size: 5rem;
  width: 100%;
  height: auto;
  transition: transform 0.3s ease 0.5s, /* Add delay to transition when cursor leaves */
              text-shadow 0.3s ease 0.1s, 
              color 0.3s ease 0.1s; /* Apply delay on the transition */
  color: #ffffff;
  cursor: pointer;
}

/* #logomain::after {
  content: "™";
  font-family: Arial, sans-serif; 
  font-size: 0.5em; 
  vertical-align: super; 
  margin-left: 5px; 
} */


/* Hover effect */
#logo:hover {
  transform: scale(.98) rotate(-.5deg); /* Slight zoom and tilt */
  text-shadow: 0 0 20px rgb(242, 255, 0), 
               0 0 30px rgb(162, 9, 192), 
               0 0 50px rgb(255, 0, 255); /* Pulsating glow */
  
}


/* Intro Section */
#bmwphoto {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin: 40px 0;
}

#mainphoto {
  width: 100%;
  height: auto;
}

#centerphoto,
#driversSide,
#exterior {
  border-radius:20px;
  border: 10px solid rgba(233, 230, 233, 0.642);
  width: 45%;
  height: auto;
  transition: transform 0.3s ease-in-out
}
#centerphoto:hover,
#driversSide:hover,
#exterior:hover {
  transform: scale(1.5); 
  z-index: 10; 
  position: relative; 
}

/* #centerphoto:hover,
#driversSide:hover,
#exterior:hover {
  width: min(150%, 100vw);
  height: auto; 
  z-index: 10; 
  position: relative; 
} */
/* 
#centerphoto {
  margin-top: 20px;
} */

#welcome {
  font-size: 1.2rem;
  text-align: center;
  margin: 20px;
}

/* Sections */
section {
  padding: 20px;
  margin: 0 auto;
  max-width: 1200px;
}


article li { color: #010000; }


article {
  margin-bottom: 30px;
  padding: 20px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 8px;
}

/* Footer */
footer {
  text-align: center;
  padding: 20px;
  background-color: #222;
  color: #fff;
  margin-top: 40px;
}
#contact {
  text-align:center;
 }








 
@media (max-width: 570px) {
  #topcontainer {
    text-align: center;
    width: 100%; /* Ensure full-width container */
  }
#titlebanner h2 {
margin-top:4%;
}
  #titlebanner {
    padding-top: 1.5em;
  }
  
  #disclaimer{
    text-align:center;
  }
 #centerphoto:hover,
  #driversSide:hover,
  #exterior:hover {
    transform: none; /* Disables scaling on smaller screens */
  }
  /* Adjust the navbar to wrap properly */
  /* .navbar {
    flex-direction: row;
    gap: 10px;
    overflow-x: auto;
    padding: 0 30px;
    box-sizing: border-box;
    width: 100%
  } */

  .navbar {
    display: flex;
    flex-direction: row;
    gap: 10px;
    overflow-x: hidden; /* Prevent horizontal overflow */
    padding: 0 15px;
    padding-bottom: 20px;
    box-sizing: border-box;
    width: 100%;
    justify-content:space-evenly;
    align-items:center;
    flex-wrap: wrap; 
  }


  .navbutton {
    flex: 1 1 auto;
    text-align: center;
    font-size: 2.5vw;
    padding: 1em 2em;
    min-width: 120px; /* Prevent buttons from becoming too narrow */
    max-width: 250px; /* Prevent buttons from becoming too wide */
    box-sizing: border-box; /* Include padding in the width calculation */
  }
  /* .navbutton {
    width: 80%; 
    text-align: center;
    font-size: 2.5vw;
    padding: 1em 2em;
  } */

  /* Fix image sizes to be fully responsive */
  #bmwphoto {
    flex-direction: column;
    gap: 10px;
  }

  #centerphoto, #driversSide, #exterior {
    width: 100%; /* Ensure images fill container */
    height: auto;
  }

  #logo {
    font-size: 3rem; /* Adjust logo size for smaller screens */
  }

}


----------------------------------- QUOTES ------------------------------------


#quote-page {
  padding: 24px 16px;
}

/* Keep your global h1 styles, but tighten this page's title spacing */
#quote-page #pagetitle {
  margin-top: 10px;
  margin-bottom: 18px;
  text-shadow: 0 0 10px rgb(162, 9, 192),
               0 0 20px rgb(162, 9, 192),
               0 0 30px rgb(162, 9, 192);
  color: #ffffff;
  font-family: Orbitron, "Roboto", Arial, sans-serif;
}



/* Card container that matches your neon vibe */

#quote-page section#quote-card {
  max-width: 860px;
  margin: 0 auto;
  padding: 18px 18px 20px 18px;
  border-radius: 18px;
  border: 1px solid rgba(184, 175, 174, 0.35);
  background: rgba(0, 0, 0, 0.55);
  box-shadow: 0 0 40px rgba(162, 9, 192, 0.18);
}

/* Subtitle */
#quote-card .quote-sub {
  margin: 0 0 14px 0;
  text-align: center;
  color: #17a24f;
  font-weight: 700;
}

/* Form layout */
#quoteform .form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 14px;
}

/* Form fields */
#quoteform .field {
  display: block;
  color: #b8afae;
  font-weight: 700;
  font-size: 0.98rem;
}

#quoteform .req {
  color: #00ff66;
  margin-left: 6px;
}

/* Inputs look consistent on iOS */
#quoteform input,
#quoteform select,
#quoteform textarea {
  width: 100%;
  margin-top: 8px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(184, 175, 174, 0.35);
  background: rgba(0, 0, 0, 0.65);
  color: #ffffff;
  box-sizing: border-box;
  font-size: 16px; /* prevents iOS zoom-on-focus */
  outline: none;
}

/* Placeholder color */
#quoteform input::placeholder,
#quoteform textarea::placeholder {
  color: rgba(184, 175, 174, 0.65);
}

/* Focus glow */
#quoteform input:focus,
#quoteform select:focus,
#quoteform textarea:focus {
  border-color: rgba(0, 255, 102, 0.55);
  box-shadow: 0 0 0 3px rgba(0, 255, 102, 0.12);
}

#quoteform textarea {
  resize: vertical;
  min-height: 140px;
}

/* Full-width row (notes textarea) */
#quoteform .field-full {
  margin-top: 14px;
}

/* Hide honeypot but keep it in DOM */
#quoteform .hp {
  position: absolute;
  left: -9999px;
  top: -9999px;
}

/* Button */
#quoteform .quote-btn {
  margin-top: 14px;
  width: 100%;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(184, 175, 174, 0.35);
  background: rgba(184, 175, 174, 0.9);
  font-family: "Roboto", Arial, sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

#quoteform .quote-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 18px rgba(162, 9, 192, 0.25);
}

#quoteform .quote-btn:active {
  transform: translateY(0px);
  box-shadow: none;
}

/* Footer note under button */
#quoteform .quote-foot {
  margin: 14px 0 0 0;
  text-align: center;
  color: #17a24f;
  font-weight: 700;
  font-size: 0.95rem;
}

/* Your global li color is black; override on this page so lists are readable */
#quote-page ul li {
  color: #b8afae;
}

/* Mobile layout */
@media (max-width: 700px) {
  #quoteform .form-grid {
    grid-template-columns: 1fr;
  }
  #quote-card {
    padding: 16px;
  }
}