/* Test-Drive Section 
/********************/

.test-drive {
  padding: 20rem 7.5rem 20rem 7.5rem;
  background-color: #0a0a0a;
}

.Test-drive-Header {
  color: #f5f5f5;
  font-size: 5.2rem;
  text-transform: uppercase;
  margin-bottom: 10rem;
  letter-spacing: 2.5px;
  text-shadow: 3px 5px 10px rgba(121, 114, 114, 0.25); /* Stronger text-shadow for a more intense look */
  font-weight: bold;
}

.test-drive-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 15rem;
}

.test-flex {
  display: flex;
  gap: 2.5rem;
  align-items: center;
}

.test-drive-link:link,
.test-drive-link:visited {
  text-decoration: none;
  font-size: 2.2rem;
  border-radius: 100%;
  background-color: #f5f5f5;
  padding: 1.2rem 2rem;
  color: #0a0a0a;
  transition: background-color 0.3s ease; /* Smooth transition on hover */
}

/* Hover effect to make it pop */
.test-drive-link:hover,
.test-drive-link:active {
  background-color: #0a0a0a;
  color: #f5f5f5;
}

.test-text {
  font-size: 2.4rem;
  color: #f5f5f5;
  line-height: 1.4;
  letter-spacing: 1.5px;
}

.horizontal-line {
  background-color: #f5f5f5;
  height: 0.4rem;
  flex-grow: 0.9;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Add subtle shadow for more depth */
}

.test-drive-text {
  color: #f5f5f5;
  font-size: 2.4rem;
  margin-bottom: 8rem;
  letter-spacing: 1px;
  font-weight: 400;
  text-align: center;
}
/* Test-Drive Section End 
/********************/

/* Care-Free Business-Plan Section */
/********************/
.care-free-business-plan {
  padding: 20rem 7.5rem;
  background: linear-gradient(to bottom, #800020, #4a0010),
    radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
  clip-path: polygon(0 0, 100% 12%, 100% 88%, 0 100%);
}

.care-free-title {
  font-size: 5.2rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 10rem;
  text-shadow: 3px 4px 12px rgba(0, 0, 0, 0.35); /* Stronger text-shadow for a more intense look */
  font-weight: bolder;
  color: #f5f5f5;
}

.care-free-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6rem;
  text-align: center;
}

.care-free-grid > div {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* This ensures content is spaced evenly and pushes the link to the bottom */
}

.care-free-image {
  width: 100%;
  height: 38rem;
  margin-bottom: 3rem;
  border-radius: 1rem;
  box-shadow: 3px 5px 10px rgba(0, 0, 0, 0.3);
  border: 1.5px solid #0a0a0a;
}

.care-free-header {
  color: #f5f5f5;
  font-size: 3rem;
  margin-bottom: 5rem;
  text-shadow: 5px 15px 25px rgba(0, 0, 0, 0.3);
}

.care-free-description-text {
  font-size: 2rem;
  color: #f5f5f5;
  letter-spacing: 0.8px;
  margin-bottom: 4rem;
  text-shadow: 3px 5px 10px rgba(0, 0, 0, 0.4);
}

.care-free-link:link,
.care-free-link:visited {
  text-decoration: none;
  border-radius: 1.5rem;
  border: solid 4px #0a0a0a;
  letter-spacing: 1px;
  padding: 2.5rem 3.5rem;
  background-color: #f5f5f5;
  font-size: 1.6rem;
  text-transform: uppercase;
  font-weight: bolder;
  color: #0a0a0a;
  display: block;
  margin-top: auto; /* Makes sure that the link stays at the bottom no matter the content above it */
  transition: all 0.3s ease; /* Smooth transition for hover effects */
}

.care-free-link:hover,
.care-free-link:focus {
  background-color: #0a0a0a; /* Dark background on hover/focus */
  color: #f5f5f5; /* Light text color on hover/focus */
  transform: scale(1.05); /* Slightly enlarge the link on hover */
}
/* Care-Free Business-Plan Section End */
/********************/

/* Care-Free Business-Plan Complimentary  Section */
/********************/
.care-free-business-plan-complimentary {
  background-color: #0a0a0a;
  padding: 5rem 7.5rem;
}

.complimentary-header {
  font-size: 1.6rem;
  color: #f5f5f5;
  letter-spacing: 2px;
  margin-bottom: 0.5rem;
  margin-top: 5rem;
  font-weight: bolder;
  text-transform: uppercase;
}

.complimentary-text {
  font-size: 1.6rem;
  color: #f5f5f5;
  letter-spacing: 1.5px;
  text-align: justify;
}

/* Care-Free Business-Plan Complimentary  Section End*/
/********************/

/* Footer-Section */
/********************/
.footer-section {
  padding: 20rem 7.5rem;
  background: linear-gradient(to bottom, #800020, #4a0010),
    radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
  clip-path: polygon(0 0, 100% 10%, 100% 90%, 0 100%);
  border-top: 4px solid #f5f5f5;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 5rem;
  height: auto;
  align-items: start;
}

.footer-icon {
  height: 3rem;
  width: 3rem;
  fill: #f5f5f5;
}

.footer-icon:hover {
  transform: scale(1.2) rotate(10deg);
  cursor: pointer;
}

.footer-header {
  font-size: 3rem;
  margin-bottom: 6rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: bolder;
  color: #f5f5f5;
  text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.8);
}

.footer-elements {
  margin-top: 5rem;
  color: #f5f5f5;
  font-size: 1.2rem;
  text-transform: uppercase;
  line-height: 2;
  font-weight: 800;
  letter-spacing: 1px;
}

.footer-link:link,
.footer-link:visited {
  text-decoration: none;
  color: #f5f5f5;
  letter-spacing: 1.7px;
  font-size: 1.3rem;
  font-weight: bold;
  transition: all 0.3s ease-in-out;
}

.footer-link:active,
.footer-link:hover {
  background-color: #f5f5f5;
  color: #0a0a0a;
  padding: 1rem 2.5rem;
  border-radius: 0.5rem;
  font-size: 1.8rem;
  transition: all ease-in-out 0.4s;
  font-family: "Orbitron";
  font-weight: bold;
  border: 2.5px solid #0a0a0a;
}

.social-links {
  margin-top: 15rem;
  display: flex;
  gap: 0rem;
  border-radius: 1rem;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

ul {
  list-style: none;
}

.links {
  text-decoration: none;
  align-content: center;
  justify-self: center;
  display: block;
}

/* Footer-Section End */
/********************/

/* Modals-Section */
/********************/
/* Check out our policy modal  */
/*****************************************************/
.modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6rem;
}

.modal {
  display: none; /* hidden by default */
  position: fixed; /* to stay at place */
  z-index: 1; /* sit on top */
  padding-top: 10rem; /* location of the box */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto; /* enable scroll if needed */
  background-color: rgb(0, 0, 0); /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}

.modal-content {
  background-color: #0a0a0a;
  margin: auto;
  padding: 2rem 5rem;
  border: 4px solid #888;
  width: 100rem;
  height: 40rem;
  position: relative;
  animation: modalZoomIn 1s ease-out;
  border-radius: 0.5rem;
}

.close {
  color: #aaaaaa;
  font-size: 3rem;
  font-weight: bold;
  position: absolute;
  right: 9px;
  top: 0px;
}

.close:hover,
.close:focus {
  color: #f5f5f5;
  text-decoration: none;
  cursor: pointer;
  text-shadow: 0 0 15px #f5f5f5;
}

.modal-popup-title {
  font-size: 2.4rem;
  margin-bottom: 3rem;
  font-weight: 900;
  letter-spacing: 1px;
  color: #f5f5f5;
}

.modal-ul-list {
  font-size: 1.8rem;
  color: #f5f5f5;
}

.modal-ul-list li {
  margin-bottom: 1.5rem;
  letter-spacing: 0.3px;
}

/* Model animation (window popup) */
/*@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: translateY(-40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.modal-content {
  animation: modalFadeIn 0.4s ease-in-out;
}
*/

@keyframes modalZoomIn {
  from {
    opacity: 0;
    transform: scale(0.6) rotate(-5deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}

/* Second Modal 
********************/
.modal1 {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 10rem; /* location of the box */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}

.modal-assistance-content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
  justify-content: space-between;
  padding: 2rem;
  background-color: #0a0a0a;
  color: #f5f5f5;
  margin: auto;
  width: 60rem;
  height: 45rem;
  position: relative;
  border-radius: 0.5rem;
  border: 3px solid #888;
  animation: modalZoomIn 1s ease-out; /* Once the animation is created, than i can just take the name of it and use everywhere */
}

.closebtn1 {
  color: #aaaaaa;
  font-size: 3rem;
  font-weight: bold;
  position: absolute;
  right: 9px;
  top: 0px;
}

.closebtn1:hover,
.closebtn1:focus {
  color: #f5f5f5;
  text-decoration: none;
  cursor: pointer;
  text-shadow: 0 0 15px #f5f5f5;
}

.modal1-title {
  font-size: 2.4rem;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #f5f5f5;
  margin-bottom: 4rem;
}

.modal-elements {
  font-size: 1.8rem;
  font-weight: 900;
  display: flex;
  justify-content: space-between;
  letter-spacing: 1px;
}

.modal-1-flex {
  display: flex;
  gap: 2rem;
  flex-direction: column;
  width: 100%;
}

.modal-assistance-links {
  text-decoration: underline whitesmoke;
  color: #f5f5f5;
}

/* Second Modal End /*
********************/

/* Third Modal /* 
********************/
.modal2 {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  overflow: auto;
  background-color: #0a0a0a;
  padding: 10rem;
  width: 50%;
  max-width: 50rem;
  height: auto;
  border: 3px solid #888;
  border-radius: 0.5rem;
}

.modal-call-content {
  position: relative;
  /*width: 60rem;
  height: 45rem; */
  width: 100%;
  max-width: 80rem;
  height: auto; /* Adjust based on content size */
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
  margin: auto;
  animation: modalZoomIn 1s ease-out;
}

.closebtn2 {
  font-size: 3rem;
  color: #888;
  font-weight: bold;
  position: absolute;
  right: -8.5rem;
  top: -9.5rem;
}

.closebtn2:hover,
.closebtn2:focus {
  color: #f5f5f5;
  text-decoration: none;
  cursor: pointer;
  text-shadow: 0 0 15px #f5f5f5;
}

.modal-call-text {
  font-size: 1.4rem;
  font-weight: 900;
  color: #f5f5f5;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.call-modal-flex {
  display: flex;
  gap: 2rem;
  flex-direction: column;
}

.call-modal-link {
  text-decoration: #f5f5f5;
  color: #f5f5f5;
  font-size: 1.6rem;
  letter-spacing: 1.5px;
}

/* Third Modal End /* 
********************/

/* Quantum-Motors-Explained Modal /* 
********************/
.QuantummotorsExplainedGrid {
  display: grid;
  column-gap: 5rem;
  row-gap: 4rem;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  height: 50%;
  margin-top: 6rem;
}

.QuantumMotorsExplained {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 58rem; /*65rem was the initial */
  width: 80%; /*80% is without scrooling -Initial */
  z-index: 1000;
  overflow: auto;
  padding: 7rem 2rem;
  background-color: #0a0a0a;
  border-radius: 0.5rem;
  border: 4px solid #888; /* Border on all sides */
}

.quantum-explained-1-content {
  position: relative;
  width: 100%;
  height: auto;
  margin: auto;
  color: #f5f5f5;
  animation: modalZoomIn 1s ease-out;
  text-align: center;
}

.Explained-1-closebtn {
  font-size: 3rem;
  position: absolute;
  top: -7rem;
  right: -1rem;
  color: #888;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.Explained-1-closebtn:hover,
.Explained-1-closebtn:focus {
  color: #f5f5f5;
  cursor: pointer;
  text-shadow: 0 0 15px #f5f5f5;
}

.QuantumMotorsExplainedTitle {
  font-size: 1.6rem;
  font-weight: bold;
  margin-bottom: 4rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.QuantumMotorsExplainedHeader {
  font-size: 1.6rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #f5f5f5;
  width: 100%;
  margin-bottom: 4rem;
}

.QuantumMotorsExplainedText {
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: 0.8px;
  margin-top: 1.5rem;
}

/* Quantum-Motors-Explained Modal End /* 
********************/

/* Discover The Future Modal  /* 
********************/
.DiscoverTheFutureModal {
  display: none;
  position: fixed;
  overflow: auto;
  width: 50%;
  height: 55%;
  z-index: 1;
  padding: 3rem;
  background-color: #0a0a0a;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 0.5rem;
  border: 3px solid #888;
}

.DiscoverTheFutureModal::-webkit-scrollbar {
  width: 3px;
}

 
.DiscoverTheFutureModal::-webkit-scrollbar-track {
  background-color: #f5f5f5;
  border-radius: 2rem;
}


.DiscoverTheFutureModal::-webkit-scrollbar-thumb {
  background-color: #888;
} 

.DiscoverTheFutureContent {
  position: relative;
  width: 100%;
  height: auto;
  margin: auto;
  color: #f5f5f5;
  text-align: center;
  animation: modalZoomIn 1s ease-out;
}

.DiscoverTheFutureCloseBtn {
  position: absolute;
  top: -3rem;
  right: -2.2rem;
  cursor: pointer;
  color: #888;
  font-size: 3rem;
}

.DiscoverTheFutureCloseBtn:hover,
.DiscoverTheFutureCloseBtn:focus {
  color: #f5f5f5;
  text-shadow: 0 0 15px #f5f5f5;
  cursor: pointer;
}

.DiscoverTheFutureHeader {
  font-size: 1.6rem;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 1.5px;
  color: #f5f5f5;
}

.DiscoverTheFutureUlList {
  margin-top: 4rem;
  margin-bottom: 4rem;
  list-style: decimal-leading-zero;
  color: #f5f5f5;
  list-style-position: inside;
}

.DiscoverTheFutureItem {
  margin-top: 6rem;
  margin-bottom: 0.5rem;
  font-size: 1.6rem;
  font-weight: bold;
  color: #f5f5f5;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.DiscoverTheFutureText {
  font-size: 1.6rem;
  font-weight: bold;
  letter-spacing: 0.8px;
  text-align: justify;
}

/* Discover The Future Modal End /* 
********************/

/* Quantum-Motors-Innovations Modal /* 
********************/
.QuantumMotorsInnovationsModal {
  position: fixed;
  display: none;
  width: 35%;
  height: 48rem;
  margin: auto;
  background-color: #0a0a0a;
  overflow: auto;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #f5f5f5;
  border-radius: 0.5rem;
  border: 3px solid #888;
  padding: 4rem 2rem;
}

.QuantumMotorsInnovationsModal::-webkit-scrollbar {
  width: 3px;
}

.QuantumMotorsInnovationsModal::-webkit-scrollbar-track {
  background-color: #f5f5f5;
  border-radius: 2rem;
}

.QuantumMotorsInnovationsModal::-webkit-scrollbar-thumb {
  background-color: #888;
}

.QuantumMotorsInnovationsContent {
  width: 100%;
  height: auto;
  position: relative;
  margin: auto;
  animation: modalZoomIn 1s ease-out;
}

.QuantumMotorsInnovationsHeader {
  font-size: 1.6rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: bolder;
  margin-left: 1.5rem;
}

.QuantumMotorsInnovationsHeader-1 {
  margin-left: 11.5rem;
  font-size: 1.6rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: bolder;
  margin-bottom: 1rem;
}

.QuantumMotorsInnovationsUlList {
  margin-bottom: 7rem;
}

.QuantumMotorsInnovationsListItem {
  font-size: 1.6rem;
  margin-bottom: 2rem;
  letter-spacing: 0.7px;
  text-align: justify;
}

.QuantumMotorsInnovationsText {
  font-size: 1.6rem;
  margin-bottom: 2rem;
  letter-spacing: 0.5px;
  text-align: justify;
  margin-top: 0.5rem;
}

.QuantumMotorsInnovationsText-1 {
  font-size: 1.6rem;
  margin-bottom: 2rem;
  letter-spacing: 0.7px;
  text-align: justify;
  margin-top: 0.5rem;
}

.QuantumMotorsInnovationsText-End {
  letter-spacing: 0.7px;
  font-size: 1.6rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  text-align: justify;
}

.QuantumMotorsInnovationsCloseBtn {
  position: absolute;
  top: -4rem;
  right: -1rem;
  font-size: 3rem;
  color: #888;
  cursor: pointer;
}

.QuantumMotorsInnovationsCloseBtn:hover,
.QuantumMotorsInnovationsCloseBtn:focus {
  color: #f5f5f5;
  text-shadow: 0 0 15px #f5f5f5;
  cursor: pointer;
}

.QuantumMotorsInnovationsSpan {
  margin-left: 3rem;
  font-size: 1.6rem;
  letter-spacing: 0.7px;
  font-weight: bolder;
}
/* Quantum-Motors-Innovations Modal End/* 
          ********************/

          /* Tmmorow i should create a sticky nav-bar for Quantum-Motors */


/* Content for the car window popup configuration 

Extra Details : 

Sports Car: Focus on speed, aerodynamics, and luxury feel

SUV: Emphasize space, comfort, and off-road capabilities

Luxury Model: Highlight premium materials, high-tech features, and exclusivity

Eco-Friendly Model: Talk about sustainability, energy efficiency, and carbon footprint



// JavaScript code for the car card sample // 

// Car configuration data with full details
const carData = {
  car1: {
    title: "Quantum X1",
    description: "A revolutionary electric car with unparalleled speed and efficiency.",
    image: "x1.jpg",
    features: ["Top Speed: 320 km/h", "Autopilot System", "Zero Emissions", "800 km Range"],
    specs: [
      ["Engine", "Electric Dual Motor"],
      ["Horsepower", "1000 HP"],
      ["Acceleration", "0-100 km/h in 2.5s"],
      ["Price", "$120,000"]
    ]
  },
  car2: {
    title: "Quantum X2",
    description: "An all-terrain beast that combines power with sustainability.",
    image: "x2.jpg",
    features: ["Off-Road Capabilities", "AI-Driven Suspension", "Fast Charging", "600 km Range"],
    specs: [
      ["Engine", "Hybrid V8"],
      ["Horsepower", "850 HP"],
      ["Acceleration", "0-100 km/h in 3.2s"],
      ["Price", "$140,000"]
    ]
  },
  car3: {
    title: "Quantum X3",
    description: "Luxury redefined with the latest cutting-edge technology.",
    image: "x3.jpg",
    features: ["Self-Driving Mode", "Interior Mood Lighting", "Premium Sound System", "Wireless Charging"],
    specs: [
      ["Engine", "Electric"],
      ["Horsepower", "750 HP"],
      ["Acceleration", "0-100 km/h in 3.5s"],
      ["Price", "$160,000"]
    ]
  },
  // Add more cars as needed...
};

// Get modal elements
const modal = document.getElementById("carModal");
const modalTitle = document.getElementById("modal-title");
const modalImage = document.getElementById("modal-image");
const modalDescription = document.getElementById("modal-description");
const modalFeatures = document.getElementById("modal-features");
const modalSpecs = document.querySelector("#modal-specs tbody");
const closeModal = document.querySelector(".close-btn");

// Open modal when clicking a car card
document.querySelectorAll(".car-card").forEach(card => {
  card.addEventListener("click", function () {
    const carKey = this.getAttribute("data-car"); // Get car key
    const carInfo = carData[carKey]; // Retrieve car info

    // Insert modal content dynamically
    modalTitle.textContent = carInfo.title;
    modalImage.src = carInfo.image;
    modalImage.alt = carInfo.title;
    modalDescription.textContent = carInfo.description;

    // Populate feature list
    modalFeatures.innerHTML = "";
    carInfo.features.forEach(feature => {
      const li = document.createElement("li");
      li.textContent = feature;
      modalFeatures.appendChild(li);
    });

    // Populate specs table
    modalSpecs.innerHTML = "";
    carInfo.specs.forEach(spec => {
      const row = document.createElement("tr");
      row.innerHTML = `<td>${spec[0]}</td><td>${spec[1]}</td>`;
      modalSpecs.appendChild(row);
    });

    // Show modal
    modal.style.display = "block";
  });
});

// Close modal when clicking close button
closeModal.addEventListener("click", () => {
  modal.style.display = "none";
});

// Close modal when clicking outside
window.addEventListener("click", (e) => {
  if (e.target === modal) {
    modal.style.display = "none";
  }
});