/* Existing CSS */
/* Navbar starts as transparent */
/* Navbar starts as transparent */
#homepage-navbar {
  background-color: rgba(255, 255, 255, 0); /* Fully transparent initially */
  transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for background color */
  position: fixed; /* Fixed positioning to stay at the top */
  top: 0; /* At the top of the viewport */
  width: 100%; /* Full width */
  z-index: 1000; /* Above other content */
  padding: 10px 15px; /* Reduced padding for a more compact look */
}
#company-name {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 1;
  color: white; /* Initial color */
  font-size: 3em; /* Adjust as needed */
  font-family: 'Poppins', sans-serif; /* Professional and elegant font */
  animation: colorChange 6s infinite; /* Apply the animation */
  font-family: Cormorant Garamond !important; 
  display:inline-block !important;
  white-space: nowrap !important;
  top:69% !important
}
/* When scrolled, the navbar changes background to white */
#homepage-navbar.scrolled {
  background-color: #ffffff; /* Solid white background when scrolled */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Optional shadow */
}

/* Navbar links */
#homepage-navbar a {
  color: white; /* White links when transparent */
  text-decoration: none;
  padding: 6px 8px; /* Reduced padding for less spacing */
  margin-right: 5px; /* Reduced space between links */
  transition: color 0.3s ease; /* Smooth color change */
}

/* Navbar links when scrolled */
#homepage-navbar.scrolled a {
  color: black; /* Black links when navbar is white */
}

.video-background {
  position: fixed; /* Fixed positioning to stay at the top */
  top: 0;
  left: 0;
  width: 100%; /* Full width */
  height: 100vh; /* Full viewport height */
  z-index: -1; /* Behind all other content */
  overflow: hidden; /* Hide overflow */
}

#bg-video {
  min-width: 100%;
  min-height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover; /* Ensure the video covers the entire area */
}

/* Main content styling */
main {
  position: relative;
  z-index: 1;
  background-color: white;
  margin-top: 100vh; /* Push the main content down by the height of the video */
  padding-bottom: 100px; /* Optional padding to prevent footer overlap */
}
footer {
z-index: 1; /* Footer stays above the video */
position: relative; /* Ensure it's visible and not overlapping */
}
.content {
padding: 20px;
overflow: auto; /* Enable scrolling */
}
.container {
margin: 38px 0; /* Spacing between containers */
text-align: center; /* Center the text */
}
a {
  text-decoration: none;
}
.fa-instagram {
  font-size: 24px;
  color: #e4405f;
}
.fa-facebook {
  font-size: 24px;
  color: #111cb4;
}
.fa-youtube {
  font-size: 24px;
  color: #e70909;
}
p {
  text-align: center;
  font-size: 16px;
  color: black;
  margin-bottom: 40px;
}
.card-container {
  display: flex; /* Use flexbox for card layout */
  justify-content: center; /* Center cards */
  flex-wrap: wrap; /* Allow wrapping */
  gap: 20px; /* Space between cards */
}

.card {
background-image: url("../img/vb.jpg") !important;
background-size: cover; /* Ensures the image covers the entire container */
background-position: center; /* Centers the image */
background-repeat: no-repeat;
background-color: white;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
width: 250px;
margin: 10px;
transition: transform 0.3s;
}

.card img {
  width: 100%; /* Make images responsive */
  height: auto; /* Maintain aspect ratio */
}

.card h3 {
  font-size: 18px;
  color: #333;
  margin: 15px 0 10px 0;
}
.card p {
  font-size: 14px;
  color: #666;
}
.card button {
  background-color: #007bff;
  color: rgb(255, 255, 255);
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  margin-bottom: 20px;
}
.card button:hover {
  background-color: #0056b3;
}
.card:hover {
  transform: scale(1.05);
}
.about-container {
  margin-top: 40px; /* Adjust this to control the gap before the About Us section */
}

.about-container p {
  margin-bottom: 0; /* Remove space between paragraphs */
  margin-top: 10px; /* Optional: Adjust for a small gap between paragraphs */
}

.about-container h1 {
  margin-bottom: 20px; /* Adjust for space between the heading and the first paragraph */
}

/* Footer CSS */
footer {
  background-color: #5f5f5f;
  color: rgb(0, 0, 0);
  text-align: center;
  padding: 0.5rem 0; /* Reduce padding */
  font-family: "Poppins", sans-serif;
  font-size: 0.8rem; /* Matching font size from About Us */
  margin: 0; /* Remove any extra margin */
}
footer p,
footer a {
  font-size: 0.8rem; /* Apply to all paragraph and link tags within footer */
}
footer .social-icons {
  display: flex;
  justify-content: center;
  gap: 20px; /* Space between icons */
  margin-bottom: 15px; /* Space between icons and "Connect Now" heading */
}

footer .social-icons a {
  font-size: 24px;
  color:black; /* Make icons visible */
  text-decoration: none;
  transition: transform 0.3s;
}

footer .social-icons a:hover {
  transform: scale(1.2); /* Slight zoom effect on hover */
}

footer p {
  text-align: center;
  margin: 5px 0;
  color:black;
}

footer p:last-child {
  margin-bottom: 0;
}
.footer-links {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 15px;
  justify-content: center;
}

.footer-links a {
  color: white;
  text-decoration: none;
}
.video-scroll-container {
  display: flex; /* Use flexbox for layout */
  justify-content: center; /* Center videos */
  flex-wrap: wrap; /* Allow wrapping */
  gap: 20px; /* Space between video items */
  padding: 1px; /* Add padding around the video container */
}

/* For individual video items */
.video-item {
  width: 300px; /* Set a fixed width for the videos */
  height: 200px; /* Set a fixed height for the videos */
  border-radius: 15px; /* Add rounded corners */
  overflow: hidden; /* Ensure content fits within the rounded corners */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
  margin: 10px; /* Add space between videos */
}

/* Adjust iframe inside video items to fit */
.video-item iframe {
  width: 100%; /* Full width of the video item */
  height: 100%; /* Full height of the video item */
  border: none; /* Remove iframe border */
  border-radius: 15px; /* Add rounded corners to the iframe */
}

.sets-apart-section {
  text-align: center;
  padding: 0px 20px;
}

.sets-apart-container {
  display: flex;
  justify-content: space-around; /* Distribute space evenly */
  flex-wrap: nowrap; /* Prevent wrapping to a new line */
}

.point-container {
  background-color:rgb(247, 245, 245); /* Light background color for each point */
  padding: 9px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow */
  width: 30%; /* Adjust width to ensure all containers fit in one line */
  margin: 10px;
  text-align: justify;
}

.point-container p {
  font-size: 1em;
}
.choosing-section {
  text-align: center;
  padding: 40px 20px;
}

.choosing-list {
  list-style-type: none; /* Remove default bullet points */
  padding: 0; /* Remove padding */
  margin: 0; /* Remove margin */
}

.choosing-list li {
  background-color: #f9f9f9; /* Light background color for each item */
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow */
  margin: 10px 0; /* Space between list items */
  font-size: 1.1em; /* Slightly larger font size for readability */
}

.choosing-list li::before {
  content: "✔"; /* Add a check mark before each item */
  color: #4caf50; /* Change the color of the check mark */
  margin-right: 10px; /* Space between the check mark and text */
}
#nav-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-around; /* Ensure links are spaced evenly */
}

/* Navbar link items */
#nav-links li {
  margin: 0 5px; /* Less space between the links */
}
#nav-links a {
  color: #000; /* Change this to your desired color */
  text-decoration: none;
  padding: 10px 15px;
  display: block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 250px; /* Adjust as needed for images */
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}

.dropdown-content .dropdown-item {
display: flex;
align-items: center; /* Align image and text */
padding: 10px;
border-bottom: 1px solid #ddd; /* Optional: to separate each item */
}

.dropdown-content .dropdown-item a {
display: flex;
align-items: center;
text-decoration: none;
color: black;
width: 100%;
}

.dropdown-content .dropdown-item:hover {
background-color: #f1f1f1; /* Change background on hover */
}

.dropdown-img {
width: 50px; /* Adjust size for images */
height: auto;
margin-right: 10px;
}

.spec-container {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start; /* Align both image and cards to the top */
  gap: 0px; /* No gap between image and cards */
  margin-bottom: 60px;
}

.spec-header {
  margin: 40px 0 20px 0; /* Add more space above the header */
  text-align: center;
}

.spec-header h2 {
  margin: 0;
  padding: 10px;
  font-size: 1.8rem;
  font-weight: bold;
  background-color: transparent;
  color: black;
}
.spec-image-container {
  width: 60%; /* Keep image container width */
  max-width: 600px;
  display: flex;
  justify-content: center;
  align-items: flex-start; /* Align the image to the top */
  padding: 0; /* Remove padding */
  border-radius: 10px;
  margin-right: 20px; /* Maintain space between image and cards */
  
}

.spec-image-container img {
  width: 161%; /* Keep the image large */
  height: auto;
  border-radius: 8px;
  margin-top: -51px; /* Ensure image has no extra top margin */
}

.spec-features-container {
  width: 38%; /* Keep the width of the feature cards container */
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Align cards to the top */
  gap: 10px;
  padding: 0;
  margin-right: 30px;
  margin-top: 35px
}


.spec-feature-card {
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  font-size: 0.9rem;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.spec-feature-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for transform and box-shadow */
  /* Add other styles as needed */
}

.spec-feature-card:hover {
  transform: scale(1.05); /* Slightly enlarges the card */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* Adds a shadow effect */
}
.spec-feature-card p {
  margin: 0;
  color: black;
  line-height: 1.7; /* Vertically center text */
  white-space: nowrap; /* Prevent text wrapping */
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 60px); /* Give text enough room to fit next to the icon */
}

.spec-feature-icon {
  width: 65px;
  height: auto;
  margin-right: 8px;
}

@media (max-width: 768px) {
  #company-name {
    font-size: 21.5px;           /* Decrease font size for mobile */
    padding: 0 10px;           /* Optional: Add padding for spacing */
  }
  .spec-container {
    flex-direction: column;
    margin-bottom: 40px; /* Reduce margin for mobile */
  }
  .spec-header h2 {
    font-size: 1.5rem; /* Adjust font size for mobile */
  }

  .spec-image-container, .spec-features-container {
    width: 100%;
  }


  .spec-image-container {
    order: -1; /* Ensure the image appears before the features */
  }

  .spec-image-container img {
    width: 100%; /* Keep image responsive */
  }

  .spec-feature-card {
    max-width: 100%;
    margin-right: 50px;
  }
  .spec-feature-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for transform and box-shadow */
    /* Add other styles as needed */
}

.spec-feature-card:hover {
    transform: scale(1.05); /* Slightly enlarges the card */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* Adds a shadow effect */
}


/* Drop Down Mobile View */
.dropdown-content {
  min-width: 100%; /* Full width on mobile */
  font-size: 14px; 
}

.dropdown-item {
  flex-direction: column; /* Stack image and text vertically */
  padding: 5px; /* Reduce padding */
}

.dropdown-img {
  width: 80%; /* Reduce image size */
  margin-right: 0;
  margin-bottom: 5px;
}

.dropdown-item a {
  font-size: 14px; /* Smaller text size */
}


#homepage-navbar {
  background-color: rgba(255, 255, 255, 1); /* Solid white background on mobile view */
}

#homepage-navbar.scrolled {
background-color: #ffffff !important; /* Keep white background when scrolled on mobile */
}

#homepage-navbar a {
color: black; /* Black text color for mobile links */
}

nav {
  width: 98%;
  height: 62px; /* Adjust height for mobile if needed */
  padding: 0.5rem; /* Adjust padding for mobile */
}
  .sets-apart-container {
    flex-direction: column; /* Stack vertically on small screens */
    align-items: center; /* Center items on small screens */
  }

  .point-container {
    width: 90%; /* Adjust width for small screens */
  }
  /* Stack the footer sections vertically */
  .footer-top {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  

  /* Make the logo centered */
  .footer-section img {
    margin: 0 auto 20px;
  }

  /* Adjust the social icons section */
  .social-icons {
    justify-content: center;
    margin: 20px 0;
  }

  /* Reduce padding in the footer */
  footer {
    padding: 15px 10px;
  }

  /* Reduce text size for mobile */
  footer p {
    font-size: 14px;
    word-spacing: 5px;
  }

  /* Adjust footer links for mobile */
  footer ul {
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
  }

  footer ul li {
    margin: 5px 0;
  }
  .video-scroll-container {
    flex-direction: column; /* Stack items in a column */
    align-items: center; /* Center items horizontally */
}

.video-scroll-container {
  flex-direction: column; /* Stack items in a column */
  align-items: center; /* Center items horizontally */
}

.video-item {
width: 100%; /* Full width on smaller screens */
margin: 10px 0; /* Space between video items */
height: auto; /* Let height adjust automatically */
aspect-ratio: 16 / 9; /* Set a 16:9 aspect ratio for the videos */
}

.video-item iframe {
width: 100%; /* Full width for iframe */
height: 100%; /* Full height according to aspect ratio */
border-radius: 15px; /* Keep rounded corners */
}
.menu-icon {
display: block;
cursor: pointer;
}
#nav-links {
  display: none; /* Hide links by default */
  flex-direction: column; /* Stack links vertically on mobile */
  width: 100%;
  background-color: #fff; /* Change to your desired background */
  position: absolute;
  top: 50px; /* Adjust according to your navbar height */
  left: 0;
  z-index: 1;
}

#nav-links li {
  margin: -9px; /* Remove margins for mobile view */
}

#nav-links.active {
  display: flex; /* Show links when menu icon is clicked */
}
.menu-icon {
display: flex; /* Show the menu icon on smaller screens */
}
nav ul {
display: none; /* Hide the menu items initially */
}
nav ul.show {
display: block; /* Show menu items when toggled */
position: absolute;
top: 45px; /* Adjust position based on nav height */
right: 0;
background-color: white; /* Background for dropdown */
width: 100%;
text-align: right;
}
.vehicle-card {
width: 100%; /* Full width on small screens */
margin-bottom: 20px; /* Adds spacing between cards */
}
.custom-container {
flex-direction: column;
align-items: center;
}

.custom-vehicle-card {
width: 90%;
}


}