/* 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: #010000;
}

#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;
}

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

.navbutton {
  --c: rgb(3, 2, 2);
  background: linear-gradient(90deg, #0000 33%, #fff5, #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{
  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;
}
#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 {
  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 */
  }

}