body, html {
      margin: 0;
      padding: 0;
      font-family: 'Pirata One', system-ui;
      scroll-behavior: smooth;
      background-color: #111;
      color: #eee;
	  background-image: url("assets/hhbg.png");
    }
	h1, h2, h4 {
	  font-size: 3vw;
	}
	p {
	  font-size: 1.5vw;
	}
	a {
	  font-size: 1vw;
	}
	button {
	  font-size: 1.5vw;
	}
    #loading-screen {
      position: fixed;
      width: 100%;
      height: 100vh;
      background: url('assets/loading-bg.png') no-repeat center center/cover;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 9999;
    }
    .loading-logo {
      width: 150px;
      animation: pulse 1.5s infinite;
    }
    @keyframes pulse {
      0%, 100% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.1); opacity: 0.7; }
    }
    .navbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #222;
      padding: 10px 20px;
      position: sticky;
      top: 0;
      z-index: 1000;
    }
    .navbar-left {
      display: flex;
      align-items: center;
    }
    .nav-logo {
      width: 50px;
      margin-right: 10px;
    }
    .site-title {
      font-size: 1.5rem;
      font-weight: bold;
    }
    .navbar-right a {
      color: #eee;
      text-decoration: none;
      margin-left: 15px;
      padding: 8px;
      background: transparent;
      border: none;
      cursor: pointer;
      transition: 0.3s;
    }
	.dropbtn {
      color: #eee;
      text-decoration: none;
      background: transparent;
      border: none;
      cursor: pointer;
      transition: 0.3s;
    }
    .navbar-right a:hover, .dropbtn:hover, .designed a:hover {
	  cursor: pointer;
      color: #EE2824;
	  font-weight: 600;
	  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.75);
  	  transition: text-shadow 0.3s ease;
    }
    .dropdown {
      position: relative;
      display: inline-block;
    }
    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #333;
      min-width: 120px;
      box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
	  border-radius: 10px;
      z-index: 1;
    }
    .dropdown-content a {
      color: white;
      padding: 10px 16px;
      display: block;
    }
    .dropdown:hover .dropdown-content {
      display: block;
	  
	}
    .section {
      padding: 30px 20px ;
      text-align: center;
    }
	header.hero-header {
      width: 100%;
      height: 32vw;
      background: url('assets/loading-bg.png') center center/cover no-repeat;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      position: relative;
    }
    .hero-header img {
      width: 40vw;
      height: auto;
      z-index: 2;
    }
    .home-buttons button {
      margin: 10px;
      padding: 15px 25px;
      background-color: #EE2824;
      color: white;
      border: none;
	  border-radius: 0.5vw;
      cursor: pointer;
      transition: 0.3s;
    }
    .home-buttons button:hover {
      background-color: #A60F0C;
      transform: scale(1.05);
	  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.75);
  	  transition: text-shadow 0.3s ease;	
    }
	.home h1:hover {
	  color: #A60F0C;
	  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8);
  	  transition: text-shadow 0.3s ease;
	  transition: color 0.3s ease;
	}
	.home h1 {
	  transition: color 0.3s ease;
	}
    .cards {
      display: flex;
      justify-content: center;
      gap: 10px;
      flex-wrap: wrap;
    }
    .card {
      background-color: #222;
      border: 1px solid #333;
      padding: 15px;
      width: 20vw;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(238, 40, 36, 0.3);
      transition: transform 0.3s;
    }

	.card img{
      max-width: 100%;
	  box-shadow: 0 0 10px rgba(238, 40, 36, 0.3);
	  border: 1px solid #444;
	  border-radius: 10px;
    }
    .card:hover {
      transform: scale(1.05);
    }
	.contact button {
	  border-radius: 10px;
	  transition: transform 0.3s;
	}
	.contact button:hover {
	  transform: scale(1.05);
	}
    button {
      font-family: 'Pirata One', system-ui;
    }
    .team {
      display: flex;
      justify-content: center;
      gap: 20px;
      flex-wrap: wrap;
    }
    .member {
      background-color: #222;
      border: 1px solid #333;
      border-radius: 10px;
      padding: 0.2vw;
      width: 15vw;
    }
    .member img {
      width: 100%;
      border-radius: 50%;
    }
	.designed {
	  text-align: center;
	  padding: 0 0 2vw 0;
	  transition: text-shadow 0.3s ease;
	}
	.modal {
	  display: none;
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  background-color: rgba(0, 0, 0, 0.8);
	  z-index: 2000;
	  justify-content: center;
	  align-items: center;
	}
	.modal-content {
	  position: relative;
	  display: flex;
  	  flex-direction: column;
	  background-color: #222;
	  color: #eee;
	  width: 80%;
	  max-width: 500px;
	  padding: 20px;
	  padding-bottom: 50px;
	  border-radius: 10px;
	  max-height: 80%;
  	  overflow-y: auto;
	  scrollbar-width: none; /* Hides scrollbar in Firefox */
	}

	.modal::-webkit-scrollbar {
   	  display: none; /* Hides scrollbar in Chrome, Edge, Safari */
  	}
	.vehicle-list {
	  text-align: center;
	  display: flex;
	  flex-direction: column;
	  gap: 20px;
	}
	.vehicle img {
	  width: 100%;
	  border-radius: 5px;
	}
	.close-btn {
	  font-size: 24px;
	  font-weight: bold;
	  color: #fff;
	  position: absolute;
	  top: 10px;
	  right: 20px;
	  cursor: pointer;
	  transition: color 0.3s ease;
	  z-index: 100;
	}
	.close-btn:hover {
	  color: #EE2824;
	}
	#back-to-top {
	  position: sticky;
	  bottom: 10px;
	  margin: 10px auto;
	  padding: 10px 20px;
	  background-color: #EE2824;
	  color: #fff;
	  border: none;
	  border-radius: 5px;
	  font-size: 16px;
	  cursor: pointer;
	  transition: background-color 0.3s ease, transform 0.2s ease;
	  z-index: 10;
	}
	#back-to-top:hover {
	  background-color: rgba(166,15,12,1.00);
	  transform: scale(1.05);
	}
	.vehicle-search {
	  margin-top: 1vw;
	  padding: 10px;
	  margin-bottom: 10px;
	  border-radius: 5px;
	  border: 1px solid #444;
	  background-color: #111;
	  color: #eee;
	  max-width: auto;
	}

	#search-button {
	  padding: 10px 10px 10px 10px;
	  margin-bottom: 20px;
	  width: 100%;
	  background-color: #EE2824;
	  color: white;
	  border: none;
	  border-radius: 5px;
	  cursor: pointer;
	  font-size: 1vw;
	}
	#search-button:hover {
	  background-color: #A60F0C;
	}

	.click-to-copy {
		cursor: pointer;
/*		color: blue;*/
		position: relative;
		display: inline-block;
		transition: transform 0.5s ease;
	  }
	.click-to-copy:hover {
		transform: scale(1.05);
	  	text-shadow: 1px 1px 4px rgba(166,15,12,0.75);
		transition: transform 0.5s ease;	
	  }

	  .tooltip {
		visibility: hidden;
		background-color: #222;
		color: #fff;
		text-align: center;
		border-radius: 4px;
		padding: 4px 8px;
		position: absolute;
		top: -28px;
		left: 50%;
		transform: translateX(-50%);
		z-index: 1;
		font-size: 12px;
		opacity: 0;
		transition: opacity 0.3s;
	  }

	  .click-to-copy.show-tooltip .tooltip {
		visibility: visible;
		opacity: 1;
	  }
    @media (max-width: 768px) {
	  .card {
		  width: 80vw;
		}
	  .menu-icon {
		font-size: 24px;
		color: #eee;
		background: none;
		border: none;
		cursor: pointer;
		position: absolute;
		right: 20px;
		z-index: 2000 !important;
	  }

	  .navbar-right {
		display: none !important;
		flex-direction: column;
		background: #222;
		position: absolute;
		top: 60px;
		left: 0;
		width: 100%;
		padding: 10px;
		box-shadow: 0px 5px 10px rgba(0,0,0,0.3);
		z-index: 1000;
	  }

	  .navbar-right.show, .navbar-right[style*="display: block"] {
		display: flex !important;
	  }
	  #menu-toggle {
		z-index: 5000 !important;
	  }
	  .navbar-right a {
		padding: 10px;
		display: block;
		text-align: center;
		border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	  }
	  .navbar::after {
		font-size: 24px;
		color: #eee;
		position: absolute;
		right: 20px;
		cursor: pointer;
		z-index: 1001;
	  }
	  header.hero-header {
        height: 175vw;
      }
      .hero-header img {
        width: 80vw;
      }
	  h1, h2, h4 {
	    font-size: 10vw;
	  }
	  p {
	    font-size: 6.5vw;
	  }
	  a {
	    font-size: 5vw;
	  }
	  button {
	    font-size: 4.5vw;
	  }
	  .team {
		display: flex;
	    justify-content: center;
	    gap: 20px;
		margin: 0;
	    flex-wrap: wrap;
	  }
	  .member {
	    background-color: #222;
	    border: 1px solid #333;
	    border-radius: 10px;
	    padding: 0.2vw;
		margin: 2vw;
	    width: 45vw;
	  }
	  .vehicle-search {
		  margin-top: 8vw;
		  padding: 10px;
		  margin-bottom: 10px;
		  border-radius: 5px;
		  border: 1px solid #444;
		  background-color: #111;
		  color: #eee;
		  max-width: auto;
		}

		#search-button {
		  padding: 10px 10px 10px 10px;
		  margin-bottom: 20px;
		  width: 100%;
		  background-color: #EE2824;
		  color: white;
		  border: none;
		  border-radius: 5px;
		  cursor: pointer;
		  font-size: 5vw;
		}
    }

	@media (min-width: 769px) {
	  .navbar-right {
		display: flex;
		justify-content: space-between;
	  }
		 #menu-toggle {
		display: none;
	  }
	}