body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f2f2f2;
  overflow-x: auto;
}

.test-body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  padding: 0;
}

nav {
  background-color: #fff;
  padding: 10px 0;
  overflow: hidden;
  display: flex;
  align-items: center;
}

nav a {
  color: black;
  text-decoration: none;
  font-weight: bolder;
  margin: 0 10px;
  display: inline-block;
  text-align: center;
  flex: 1;
}

nav a:hover {
  color: #ff0000;
}

nav .addbutton {
  color: black;
  background-color: white;
  padding: 1.2rem 1.5rem;
  font-size: 1.4rem;
  border-radius: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.7s;
  display: inline-block;
  text-align: center;
}

.header-left {
  max-width: 620px;
  position: relative;
  z-index: 2;
}

.header-left .shop-button {
  position: relative;
  color: black;
  background-color: white;
  padding: 1.2rem 1.5rem;
  font-size: 1.4rem;
  border-radius: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.7s;
}


.nav a img {
  max-height: 50px;
  width: auto;
  vertical-align: middle;
}



.service__container {
  text-align: center;
}

.service__grid {
  margin-top: 4rem;
  display: grid;
  gap: 4rem 2rem;
}

.service__card img {
  max-width: 150px;
  margin-inline: auto;
  margin-bottom: 1rem;
  border-radius: 100%;
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2);
}

.service__card h4 {
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
  font-weight: 600;
}

.customisation {
  background-image: linear-gradient(rgba(242, 242, 242, 0.7), rgba(242, 242, 242, 0.7)), url("main_Photos/customisation.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.customisation__container {
  text-align: center;
}

.customisation__container .section__header,
.customisation__container .section__description {
  max-width: 750px;
  margin: auto;
  color: black;
}

.customisation__grid {
  margin-top: 4rem;
  display: grid;
  gap: 4rem 2rem;
}

.customisation__card h4 {
  font-size: 3rem;
  font-weight: 700;
  color: white;
}

.customisation__card p {
color: white;
}



.price__container {
  text-align: center;
}

.price__grid {
  margin-top: 4rem;
  display: grid;
  gap: 2rem 1rem;
}

.price__card {
  position: relative;
  overflow: hidden;
  padding: 4rem 1rem;
  border-top: 5px solid #f0f0f0;
  border-radius: 10px;
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  background-color: white;
}

.price__card:hover {
  border-color: white;
  background-color: #f0f0f0;
}

.price__card__ribbon {
  position: absolute;
  width: fit-content;
  top: 2rem;
  right: -4.5rem;
  transform: rotate(45deg);
  padding: 5px 5rem;
  font-size: 0.9rem;
  color: black;
  transition: 0.3s;
}

.price__card:hover .price__card__ribbon {
  font-size: 1rem;
}

.price__card h4 {
  font-size: 1.2rem;
  font-weight: 600;
}

.price__card h3 {
  margin-bottom: 1rem;
  font-size: 2.5rem;
  font-weight: 600;
  transition: 0.3s;
}

.price__card .btn {
  margin-top: 1rem;
  min-width: 150px;
}


@media (width > 480px) {

  .service__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .customisation__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .price__grid {
    grid-template-columns: repeat(2, 1fr);
  }

}

@media (width > 768px) {

  .service__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .customisation__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .price__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (width > 1024px) {
  .price__grid {
    gap: 2rem;
  }
}


.container {
  position: relative;
  overflow: hidden;
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.brand-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.brand-item {
  margin: 20px;
  text-align: center;
}

.brand-item img {
  width: 150px;
  height: auto;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.brand-item img:hover {
  transform: scale(1.1);
}

.search {
  padding: 14px;
  border-radius: 28px;
  background: #f6f6f6;
  margin-right: auto;
}

.search-input {
  font-size: 16px;
  font-family: 'lexend', sans-serif;
  margin-left: 14px;
  outline: none;
  border: none;
  background: transparent;
}

@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 400;
  src: url(123.woff2) format('woff2');
}

.search,
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -moz-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  vertical-align: middle;
  margin-right: 5px;
}

.car-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
  flex-wrap: wrap;
}

.car-MB {
  background-color: #ececec;
  width: 300px;
  padding: 20px;
  border: 1.8rem solid #ccc;
  border-radius: 5px;
  margin: 30px;
}

.image-viewer {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
}

.backward-btn,
.forward-btn {
  background: #393e46;
  color: #ffffff;
  border: none;
  border-radius: 2px;
  padding: 5px 8px;
  cursor: pointer;
  height: 180px;
}

.current-image {
  width: 270px;
  height: 180px;
}

.add-to-cart {
  background-color: #ff0000;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
  margin-left: 28px;
  margin-right: 5px;
  width: 38%;
}

.add-to-cart:hover {
  background-color: #a43a0a;
}

.details {
  background-color: #ffb300;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
  width: 38%;
  margin-left: 5px;
  margin-right: 15px;
}

.details:hover {
  background-color: #caa607;
}

.test {
  background-color: #0062ff;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  margin: 8px 27px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
  width: 81%;
}

.test:hover {
  background-color: #0041aa;
  ;
}

.video-container {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  /* 16:9 Aspect Ratio */
}

.video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.table1 {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

.th1:hover {
  background: #1e669a;
}

.td1:hover {
  background: #949ea4;
}

.th1,
.td1 {
  border: 2px solid #202020;
}

.th1,
.td1 {
  border: 2px solid #000000;
  padding: 8px;
  text-align: center;
}


.th1 {
  background-color: #66a0d7;
}

.content {
  margin-top: 20px;
  text-align: center;
}

.separator {
  border-top: 1px solid #000;
  margin: 20px 0;
}

.iframe-container {
  width: 100%;
  position: relative;
  /* Important for positioning the iframes */
}

.left {
  left: 0;
  margin: 30px 50px 60px 20px;
  position: absolute;
  /* Position the iframes absolutely within the container */
  width: 300px;
}

.right {
  right: 0;
  margin: 30px 20px 60px 50px;
  position: absolute;
  width: 300px;
}

.container-test {
  max-width: 600px;
  padding: 20px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  margin: 10px auto;
}

.h2-test {
  text-align: center;
}

.form-test {
  margin-top: 20px;
}

.label-test {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.test-input,
.testarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
}

.testarea {
  height: 100px;
}

.test-sumbit {
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}

.test-sumbit:hover {
  background-color: #0056b3;
}

.LogoGif {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
}

button.Logout,
button.DA,
button.ShowPass {
  background-color: #c80f0f;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
  border: 1px solid #000000;

}

button,
.ProfileName {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  border-radius: 5px;

}


button:hover {
  transform: scale(1.04);
  opacity: 0.8;
}


.green-btn {
  background-color: #00ff00;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
}

.ReturnButton {
  color: white;
  margin: 8px 0;
  border: none;
  cursor: pointer;

  width: auto;
  padding: 10px 18px;
  background-color: #001eff;
}

.containerLogin {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

span.password {
  float: right;
  padding-top: 16px;
}

span.LoginRegister {
  float: right;
  padding-top: 3pt;
  text-decoration: none;
  padding-right: 3px;
}

span.RPEmail,
.EmailReset {
  text-align: center;
  display: block;
}

.Welcome {

  color: #000000;
  font-weight: 800;
  text-transform: capitalize;
}

.AlertBox {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 150px;
  max-width: 90%;
  width: auto;
  height: auto;
  padding: 10px;
  text-transform: capitalize;
  background: rgb(255, 0, 0);
  border: 10px solid #eb2629c8;
  border-radius: 10px;
  font-family: Impact, Helvetica, Arial;
  color: #fff;
  text-align: center;
  transition: 1s;
  display: none;
}

.Profile {
  align-content: left;
  background: #ccc;
  max-width: 800px;
  margin: 20px;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px #000000;
  padding-bottom: 10px;
}

button.Table {
  background-color: #bababa;
  border: 1px solid #000000;
  padding: 14px 20px;
  margin: 8px 0;
  cursor: pointer;
  width: 100%;
  text-align: center;


}


.ProfileName {
  display: inline-block;
  vertical-align: top;
  margin-right: 20px;

}

.ProfileContainer {
  display: none;
  vertical-align: top;
  margin-right: 20px;
  padding: 20px;
  background-color: #d7d7d7c4;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  width: 60%;
  margin: 20px;
  box-shadow: 0 0 10px #000000;
  padding-bottom: 10px;
}

.tdp {
  width: 100%;
  font-weight: bold;
}

button.delete {

  background-color: #bababa;
  border: 1px solid #000000;
  padding: 14px 20px;
  margin: 8px 0;
  cursor: pointer;
  text-align: center;
}

.input-text,
.input-password,
.input-email {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  border-radius: 3px;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
  text-transform: capitalize;
  background-color: #e1e1e1;
  transition: .5s;
}


.input-text:focus,
.input-password:focus,
.input-email:focus {
  background: #fff;
  color: #000000;

}

.input-text:hover,
.input-password:hover,
.input-email:hover {
  background: #fff;
}

.login-body {
  background: radial-gradient(circle, #ffffff, #4a4a4a);
}

.vid-profile {
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  width: 60%;
  margin: 20px;
}

.login-iframe {
  width: 70vh;
  height: 90vh;
  vertical-align: top;
}

li.login-list:hover {
  transform: scale(1.01);
  font-weight: bold;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  border-radius: 5px
}

.heading-VK {
  text-align: center;
}

.heading-VK span {
  font-weight: 500;
  font-size: 50px;
  color: aliceblue;
}

.heading-VK p {
  font-size: 0.938rem;
  font-weight: 300;
}

.cars-container {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-top: 2rem;
}

.cars-container .box-VK {
  flex: 1 1 17rem;
  position: relative;
  height: 200px;
  border-radius: 0.5rem;
  overflow: hidden;
}

.cars-container .box-VK img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  overflow: hidden;
}

.cars-container .box-VK img:hover {
  transform: scale(1.1);
  transition: 0.5s;
}

.cars-container .box-VK h2 {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  font-weight: 400;
  font-size: 1;
  background: rgba(8, 7, 41, 255);
  padding: 8px;
  border-radius: 0.5rem;
}

.cars-container .box-VK:hover h2 {
  background-color: yellowgreen;
}

.about {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
}

.about-text {
  flex: 1 1 21rem;
}

.about-text {
  flex: 1 1 21rem;
}

.about-text span {
  font-weight: 500;
  color: var(--main-color);
}

.about-text h2 {
  font-size: 1.7rem;
}

.about-text p {
  font-size: 0.938rem;
  margin: 0.5rem 0 1.4rem;
}

button.boxx-VK {
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  display: inline-block;
  text-decoration: none;
}

ul.VK {
  text-align: left;
  color: aqua;
}

.boxx-VK {
  background-color: rgba(8, 7, 41, 255);
  color: aliceblue;
  border: solid #558fa6;

}

.boxy-VK {
  background-color: rgba(154, 180, 207, 255);
  color: aliceblue;
  border: solid #353944;


}

.boxx-VK,
.boxy-VK {
  border-radius: 10px;
  padding: 10px;
  width: fit-content;
}

.container-VK {
  width: 80%;
  margin: 0 auto;
  text-align: center;
}

.VK-info {
  margin-top: 30px;
}

.car-photo {
  width: 100%;
  height: auto;
}

.car-info {
  margin-top: 20px;
  text-align: left;
}

.body-AB {
  background: url(Alfa-Romeo/download.jpeg);
  background-repeat: no-repeat;
  background-size: cover;
}

.mo-al {
  color: white;
  text-shadow: 2px 5px black;
}

div.form-alfa {
  margin-left: auto;
  margin-right: auto;
  padding: 10 px;
  background-color: grey;
  text-align: center;
}

h1.AA {
  color: white;
  text-align: center;
  text-shadow: 5px 2px black;
}

.body-AA {
  background: url(Audi/1.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

.mo {
  color: white;

}

div.form-audi {
  height: 200 px;
  width: 450 px;
  margin-left: auto;
  margin-right: auto;
  padding: 10 px;
  background-color: hsl(168, 100%, 30%);
  text-align: center;
  border: 10px rgb(182, 25, 25);
}

.C6 {
  color: white;

}

h2.B6 {
  color: white;
  text-shadow: 5px 2px black;
}

.A87:hover {
  border-radius: 8px;
  transform: scale(1.1);

}

h3.h3-AA {
  color: white;
  text-shadow: 5px 2px black;
}

table.table-AA {
  border-collapse: collapse;
  margin: 25 px 0;
  font-size: 0.9cm;
  min-width: 2000 px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

tbody tr#a {
  background-color: hsl(168, 100%, 30%);
  color: white;
  background-size: cover;

}

table.table-AA th.th {
  padding: 12px 15px;
}

content-table td.td {
  padding: 12 px 15 px;
}

tbody tr#b {
  color: white;
}

tbody tr#c {
  color: white;
  background-color: hsl(168, 100%, 30%);
}

#ab {
  text-align: center;
}

tr#d {
  color: white;
}

tr#e {
  color: white;
  background-color: hsl(168, 100%, 30%);
}

img.A:hover {
  border-radius: 8px;
  transform: scale(1.1);
}

button.button-AA {
  margin-left: 720px;
  background-color: brown;
  color: white;

}

table.table-AA tr:hover {
  transform: scale(1.1);
}

.heading-NT {
  text-align: center;
}

.heading-NT span {
  font-weight: 500;
  color: #c30000;
  font-size: large;
}

.heading-NT p {
  font-size: 0.938rem;
  font-weight: 300;
}

.container-cars {
  display: flex;
  flex-wrap: wrap;
  gap: 4rem;
  margin-top: 2rem;
}

.container-cars .box {
  flex: 1 1 17rem;
  position: relative;
  height: 230px;
  border-radius: 0.5rem;
  overflow: hidden;
}

.container-cars .box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  overflow: hidden;
  transition: transform 0.3s;
}

.container-cars .box img:hover {
  transform: scale(0.95);
}

.container-cars .box h2 {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  font-weight: 400;
  font-size: 1rem;
  background: floralwhite;
  padding: 8px;
  border-radius: 0.5rem;
}

.container-cars .box:hover h2 {
  background: floralwhite;
  color: #c30000;
}

.Video {
  position: relative;
  text-align: center;
  width: 100%;
  height: auto;
}

.Video video {
  max-width: 100%;
  height: auto;
}

.container-NT {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.container-NT .main_content {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  padding: 30px;
}

.container-NT .main_content .content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  color: #242b2e;
}

.container-NT .main_content .content h1 {
  font-size: 52px;
  letter-spacing: 2px;
}

.container-NT .main_content .content .btn button {
  display: inline-block;
  padding: 10px 15px;
  font-size: 17px;
  background-color: #c30000;
  color: #fff;
  border-radius: 5px;
  text-decoration: none;
  margin-top: 15px;
  transition: 0.4s ease;
}

.container-NT .main_content .content .btn :hover {
  background-color: #ff3737;
}

.container-NT .main_content .content p {
  margin-top: 10px;
  font-size: 20px;
  font-weight: 500;
}

.container-NT .main_content .img {
  width: 100px;
  height: 80px;
  padding: 3px;
  border-radius: 10px;
  background-repeat: no-repeat;
  background-size: cover;
}

.container-NT .futures {
  width: 100%;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container-NT .futures .engine,
.transmission,
.power,
.tank {
  width: 300px;
  height: 90px;
  padding: 4px;
  margin: 25px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.container-NT .futures .engine img,
.transmission img,
.power img,
.tank img {
  width: 100px;
  height: 80px;
  padding: 3px;
  border-radius: 10px;
}

.container-NT .futures .engine :hover,
.transmission :hover,
.power :hover,
.tank :hover {
  background-image: linear-gradient(to right, #c30000 20%, #ff3737 80%);
  color: #ffff;
}

.table-NT {
  border-spacing: 0;
  border-collapse: collapse;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  width: 100%;
  margin: 0 auto;
}

.table-NT thead tr {
  height: 60px;
}

.table-NT tbody tr {
  height: 50px;
}

.table-NT td,
.table-NT th {
  text-align: left;
}

.table-NT tbody tr:nth-child(even) {
  background-color: #f5f5f5;
}

.table-NT tbody tr {
  font-family: OpenSans-Regular;
  font-size: 15px;
  color: gray;
  line-height: 1.2;
  font-weight: normal;
}

.table-NT tbody tr:hover {
  color: #555;
  background-color: #f5f5f5;
  cursor: pointer;
}

textarea {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  resize: none;
  font-family: Arial, sans-serif;
}

.sumbit-NT {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.sumbit-NT:hover {
  background-color: #45a049;
}


.aboutus {
  padding: 100px;
}

.container-about {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.image_section {
  flex: 1;
  text-align: center;
  opacity: 0;
  transform: translateY(50px);
  animation: slideIn 1s forwards;
}

.image_section img {
  max-width: 100%;
  height: auto;
  opacity: 0;
  transform: translateY(50px);
  animation: slideIn 1s forwards;
}

.content_section {
  flex: 1;
  margin-left: 40px;
  opacity: 0;
  transform: translateY(50px);
  animation: fadeIn 1s forwards;
  animation-delay: 0.5s;
}

.content_section h2 {
  font-size: 35px;
  margin-bottom: 20px;
}

.content_section p {
  font-size: 18px;
  line-height: 1.6;
}

.content_section #btn,
#github {
  display: inline-block;
  padding: 10px 15px;
  border-radius: 5px;
  margin-top: 15px;
  transition: 0.4s ease;
}

.content_section #btn {

  font-size: 17px;
  background-color: #25d88d;
  color: #fff;
  text-decoration: none;
}

.content_section #btn:hover {
  background-color: #1da36b;

}

#github {
  background-image: url(main_Photos/icons8-github-16.png);
  background-repeat: no-repeat;
  background-position: center;
  height: 20px;
  width: 20px;
  background-color: rgb(255, 255, 255);
  border: 1px solid black;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(50px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(50px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.body-DF {
  background: rgb(0, 0, 0, 0.5) url("Cars/Dodge/OIP.jpeg") center center fixed;
  background-blend-mode: darken;
  background-size: cover;
  background-position: center;
}



.body-FD {
  background: rgb(0, 0, 0, 0.5) url('Cars/Ford/wp2488393.jpg') center center fixed;
  background-blend-mode: darken;
  background-size: cover;
  background-position: center;
}

.charger {
  width: 80%;
  left: 15%;
  top: 20%;
  padding: 20px;
  padding-left: 50;
}

.duarngo {
  width: 80%;
  left: 15%;
  top: 20%;
  padding: 20px;
  padding-left: 50;
}



.Hornet {
  width: 80%;
  left: 15%;
  top: 20%;
  padding: 20px;
  padding-left: 50;
}


.content-table {
  border-collapse: collapse;
  margin: 25px 0;
  font-size: 0.9em;
  min-width: 400px;
  border-radius: 5px 5px 0 0;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
  color: #dddddd;
}

.content-table thead tr {
  background-color: #009879;
  color: #ffffff;
  text-align: left;
  font-weight: bold;
}

.content-table th,
.content-table td {
  padding: 12px 15px;
}

.content-table tbody tr {
  border-bottom: 1px solid #dddddd;
}

.content-table tbody tr:nth-of-type(even) {
  background-color: #f3f3f3;
}

.content-table tbody tr:last-of-type {
  border-bottom: 2px solid #009879;
}

.my-button {
  background-color: #009879;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
  border-radius: 50;
}

.my-button:hover {
  background-color: #009879;
  /* Darker green background color on hover */
  border-radius: 100px;
}

.h1-DF {
  color: #bc8181;
  font-style: initial;
}

.p-DF {
  color: #dddddd;
}


.charp2 {
  width: 750px;
  height: 350px;
  float: left;
}

.challenger {
  width: 80%;
  left: 15%;
  top: 20%;
  padding: 20px;
  padding-left: 50;
}

.charp3:hover {
  background-color: #009879;
  border-radius: 20px;
}

.charp2:hover {
  background-color: #009879;
  border-radius: 20px;
}

.charp1:hover {
  background-color: #009879;
  border-radius: 20px;
}

.content-table th:hover {
  background-color: #009879;
  border-radius: 20PX;
}

.p-DF :hover {
  font-size: 400;
}

form.form-df {
  max-width: 400px;
  margin: 50px auto;
  background-color: #7c767655;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}

.label-DF {
  display: block;
  margin-bottom: 5px;
  color: #ffffff;
}

input.text-DF,
input.email-DF,
input.password-DF,
.textarea-DF {
  width: calc(100% - 22px);
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #b9afaf;
  border-radius: 5px;
  box-sizing: border-box;
}

.textarea-DF {
  resize: vertical;
  height: 100px;
}

input.submit-DF {
  background-color: #009879;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  width: 100%;
}

input.submit-DF :hover {
  background-color: #006551;
}

.my-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
  text-align: center;
}

/* Style list items */
.my-list li {
  background-color: #009879;
  padding: 10px;
  margin-bottom: 5px;
  border-radius: 5px;
  cursor: pointer;
  /* Add cursor pointer */
}

/* Add hover effect */
.my-list li:hover {
  background-color: #006551;
}

.target-div {
  margin-top: 20px;
  padding: 20px;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
}

.iframe-container-DF {
  position: relative;
  width: 100%;
  padding-bottom: 30%;
}

.iframe-container-DF iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.mustang {
  width: 80%;
  left: 15%;
  top: 20%;
  padding: 20px;
  padding-left: 50;
}

.bronco {
  width: 80%;
  left: 15%;
  top: 20%;
  padding: 20px;
  padding-left: 50;
}

.ranger {
  width: 80%;
  left: 15%;
  top: 20%;
  padding: 20px;
  padding-left: 50;
}

.exp {
  width: 80%;
  left: 15%;
  top: 20%;
  padding: 20px;
  padding-left: 50;
}



.body-CL-vid {
  font-family: 'Roboto', sans-serif;
  background-color: #f8f9fa;
  color: #333;
  line-height: 1.6;
}



.header-vid {
  background-color: #007bff;
  color: #fff;
  padding: 20px;
  text-align: center;
}

.header-vid h1 {
  font-size: 32px;
  margin-bottom: 10px;
}


.video-container-CL {
  position: relative;
  margin-bottom: 40px;
}

.video-container-CL video {
  width: 100%;
  display: block;
  border-radius: 8px;
}


.iframe-container-CL {
  margin-bottom: 40px;
  overflow: hidden;
  border-radius: 8px;
}

.iframe-container-CL iframe {
  width: 100%;
  height: 450px;
  border: none;
}

.body-CL {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background-color: #1f1f1f;
  /* Dark background color */
  color: #ffffff;
  /* White text color */
}

.container-CL {
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 800px;
}

.header-CL {
  background-color: #111111;
  /* Darker background color for header */
  padding: 20px 0;
}

.logo-CL img {
  height: 40px;
}

.navigation-CL ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.navigation-CL ul li {
  display: inline-block;
  margin-right: 20px;
}

.navigation-CL ul li a {
  text-decoration: none;
  color: #ffffff;
  transition: color 0.3s ease;
}

.navigation-CL ul li a:hover {
  color: #ffd700;
  /* Change color on hover */
}

.search-bar input[type="text"] {
  padding: 8px;
  border: none;
  border-radius: 5px;
}

.search-bar button {
  padding: 8px 15px;
  background-color: #ffd700;
  /* Yellow button color */
  border: none;
  border-radius: 5px;
  color: #111111;
  /* Dark text color */
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.search-bar button:hover {
  background-color: #cccc00;
  /* Darker yellow on hover */
}

.hero {
  background-size: cover;
  background-position: center;
  color: #ffffff;
  /* White text color */
  padding: 100px 0;
}

.hero-content {
  text-align: center;
}

.hero-content h1 {
  font-size: 3rem;
  margin-bottom: 20px;
}

.hero-content p {
  font-size: 1.5rem;
  margin-bottom: 40px;
}



.car-CL {
  background-color: #111111;
  /* Darker background color for cars */
  padding: 20px;
  border-radius: 10px;
  text-align: center;
}

.car-CL img {
  width: 100%;
  border-radius: 10px;
  margin-bottom: 20px;
}

.car-CL h3 {
  font-size: 1.5rem;
  margin-bottom: 10px;
}

.car-CL p {
  margin-bottom: 10px;
}


.individual-car {
  background-color: #1f1f1f;
  /* Dark background color */
  color: #ffffff;
  /* White text color */
  padding: 100px 0;
}

.car-details {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.car-details img {
  width: 100%;
  border-radius: 10px;
  margin-bottom: 20px;
}

.car-details h2 {
  font-size: 2rem;
  margin-bottom: 20px;
}

.car-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.car-table td {
  padding: 10px;
  border-bottom: 1px solid #555555;
  /* Darker border color */
}

.car-table td:first-child {
  font-weight: bold;
  width: 40%;
}

.car-table td:last-child {
  text-align: right;
}

.car-details p {
  font-size: 1.2rem;
  margin-bottom: 20px;
}

.cta-button,
.buy-button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #ffd700;
  /* Yellow button color */
  color: #111111;
  /* Dark text color */
  text-decoration: none;
  border-radius: 5px;
  font-size: 1rem;
  margin-right: 10px;
  transition: background-color 0.3s ease;
}

.cta-button:hover,
.buy-button:hover {
  background-color: #cccc00;
  /* Darker yellow on hover */
}

.contact {
  background-color: #1f1f1f;
  /* Dark background color */
  color: #ffffff;
  /* White text color */
  padding: 100px 0;
}

.section-title {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 50px;
}



.contact-form .form-group {
  margin-bottom: 20px;
}

.contact-form label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 5px;
  background-color: #333333;
  /* Darker background color for form fields */
  color: #ffffff;
  /* White text color */
}

.contact-form textarea {
  resize: none;
  height: 150px;
}

.contact-form button {
  display: block;
  width: 100%;
  padding: 10px 20px;
  background-color: #ffd700;
  /* Yellow button color */
  color: #111111;
  /* Dark text color */
  border: none;
  border-radius: 5px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.contact-form button:hover {
  background-color: #cccc00;
  /* Darker yellow on hover */
}

#contact-info {
  margin-top: 50px;
}

#contact-info p {
  font-size: 1.2rem;
  margin-bottom: 20px;
}

#contact-info ul {
  list-style: none;
  padding: 0;
}

#contact-info ul li {
  margin-bottom: 10px;
}

#contact-info ul li strong {
  font-weight: bold;
}













@media only screen and (max-width: 1000px) {
  nav {
    flex-direction: column;
  }

  nav a {
    width: 100%;
    text-align: center;
  }

  .container-about {
    flex-direction: column;
  }

  .image_section,
  .content_section {
    flex: 100%;
    margin: auto;
    text-align: center;
    padding: 0px;
  }

  .image_section img {
    width: 100%;
    margin-bottom: 30px;
  }
}