/* General Reset */
@import url('https://fonts.googleapis.com/css2?family=Centaur&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Harrington&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

:root {
  overflow-x: hidden;
}

/* Body with Background Effects */
body {
  font-family: Arial, sans-serif;
  color: #333;
  line-height: 1.6;
  position: relative;
  overflow-x: hidden; /* Add overflow-x: hidden; */
}

body, html {
  --bg-scale: 1;
}

/* Example CSS for the pseudo-element */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('IMG HVT/photo-1623719089373-70dc2367f4c3.avif'); /* Adjust the path to your background image */
  background-size: cover;
  background-attachment: fixed; /* This helps with the parallax effect */
  background-position: center;
  filter: blur(var(--bg-blur)) brightness(var(--bg-brightness));
  transform: scale(var(--bg-scale));
  z-index: -1;
}

.taxi-icon {
  display: flex; /* Change to flex */
  align-items: center;
  justify-content: center;
  margin-bottom: 100px; /* Adjust the value to set the desired gap */
  width: 100%; /* Ensure it takes up the full width */
}

.hero-description {
  margin-top: 0; /* Ensure there is no default margin */
  font-size: 20px;
}

.hero {
  background-position: var(--bg-position);
  filter: brightness(var(--bg-brightness)) blur(var(--bg-blur));
  transform: scale(var(--bg-scale));
  transition: filter 0.3s, transform 0.3s;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), transparent);

}


/* Navigation Bar */
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed; /* Ensure the nav bar remains fixed */
  top: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.8); /* Semi-transparent header */
  padding: 1rem 2rem;
  z-index: 1000;
  border-bottom: 2px solid #edf300; /* Adjust the color and thickness of the border */
  box-sizing: border-box; /* Include the border in the element's total width and height */
  border-radius: 0 0 20px 20px;
  overflow: hidden; /* Ensure no overflow */
  height: 80px; /* Set a fixed height for the navbar */
  transition: none; /* Disable transitions that might affect the size */
  flex-shrink: 0; /* Prevent shrinking */
}

.hv-font {
  font-family: 'Centaur', serif;
}

.taxis-font {
  font-family: 'Harrington', serif;
}

nav .logo {
  color: white;
  font-size: 1.5rem;
  font-weight: bold;
}

/* Responsive Styling */
@media (max-width: 600px) {
  nav {
    padding: 0.5rem 1rem; /* Reduce padding for smaller screens */
  }

  nav .logo {
    font-size: 1.2rem; /* Reduce font size for smaller screens */
  }

  .hv-font, .taxis-font {
    font-size: 1rem; /* Adjust font size for smaller screens */
  }
}


nav ul {
  list-style: none;
  display: flex;
}

nav ul li {
  margin-left: 1.5rem;
}

nav ul li a {
  color: white;
  text-decoration: none;
  transition: color 0.3s ease;
}

nav ul li a:hover {
  color: #edf300;
}

/* Hero Section */
.hero {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: white;
}

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

.hero-text img {
  margin-bottom: 1rem;
}

.contact-info {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 10rem; /* Adjust the value to move the section lower */
}

.contact-item {
  margin-right: 20px; /* Adjust the spacing as needed */
  text-align: left;
}

.contact-item h2 {
  margin: 0; /* Ensure headings have no extra margin */
}

.contact-item p {
  margin: 0; /* Ensure paragraphs have no extra margin */
}

.contact-item:nth-child(2) {
  margin-left: 30px; /* Adjust the value to move the phone information to the right */
}

/* Hero Buttons */
.hero-buttons {
  display: flex;
  gap: 2rem;
  justify-content: center;
  margin-top: 7rem; /* Add spacing above the buttons */
}

.hero-buttons .or {
  padding-top: 0.75rem;
  color: white;
  font-size: 1rem;
  font-weight: bold;
  text-transform: uppercase;
}

.hero-buttons .btn {
  text-decoration: none;
  padding: 0.625rem 1.25rem;
  border: 2px solid white;
  color: white;
  font-size: 1rem;
  border-radius: 0.3125rem;
  transition: all 0.3s ease;
  background-color: black;
  background: rgba(0, 0, 0, 0.8);
}

.hero-buttons .btn:hover {
  background: white;
  color: #333;
  scale: 1.15;
}

/* Media Query for Larger Screens */
@media (min-width: 768px) {
  .contact-info {
    justify-content: space-around; /* Spread out the elements */
  }

  .contact-item h2 {
    font-size: 1.5rem; /* Make headings larger */
  }

  .contact-item p {
    font-size: 1.25rem; /* Make paragraphs larger */
  }

  .hero-buttons .btn {
    font-size: 1.25rem; /* Make buttons larger */
  }
}

/* Content Sections */
.content {
  padding: 20px;
  text-align: center;
  background: rgba(0, 0, 0, 0.8); /* Semi-transparent white background */
  margin: 20px auto;
  max-width: 90%; /* Adjust to relative width */
  border-radius: 10px;
  color: white;
  box-shadow: 0 0 20px 5px rgba(255, 255, 255, 0.6);
  transition: box-shadow 0.3s ease;
  position: relative; /* Ensure the element is positioned relative to the pseudo-element */
  padding: 30px; /* Adjust the padding to create space for the inset border */
}

.content::after {
  content: '';
  position: absolute;
  top: 10px; /* Adjust the value to inset the border from the top edge */
  right: 10px; /* Adjust the value to inset the border from the right edge */
  bottom: 10px; /* Adjust the value to inset the border from the bottom edge */
  left: 10px; /* Adjust the value to inset the border from the left edge */
  border: 2px solid #edf300; /* Adjust the color and thickness of the border */
  pointer-events: none; /* Ensure the pseudo-element does not interfere with the content */
  box-sizing: border-box; /* Include the border in the element's total width and height */
  border-radius: 10px;
}

.content h2 {
  margin-bottom: 10px;
  font-size: rem;
  font-family: 'Centaur', serif; 
  font-size: 50px;
}

.content p {
  text-align: left;
  font-size: 1rem;
  margin-bottom: 20px; /* Adjust the value to set the desired gap */
}

.content-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.content-one, .content-two, .content-three {
  flex: 1;
  padding: 20px;
  box-sizing: border-box;
}

.content-one {
  border-right: 1px solid #ffffff; /* Vertical dividing line for the first section */
}

.content-two {
  border-right: 1px solid #ffffff; /* Vertical dividing line for the second section */
}
.content-three {
  text-align: left;
}
.content-three h2 {
  text-align: center;
}

@media (max-width: 600px) {
  .content-container {
    flex-direction: column;
  }

  .content-one, .content-two, .content-three {
    border-right: none; /* Remove vertical dividing line */
    border-bottom: 1px solid #ffffff; /* Horizontal dividing line */
  }

  .content-three {
    border-bottom: none; /* Remove dividing line from the last element */
    text-align: left;
  }

  .content h2 {
    margin-bottom: 10px;
    font-size: 1.5rem;
    font-family: 'Centaur', serif; 
  }
}


.yellow-link {
  color: yellow; /* Changes the link color to yellow */
}

.yellow-link:visited {
  color: yellow; /* Ensures the visited link is also yellow */
}

.yellow-link:hover {
  color: yellow; /* Ensures the link remains yellow when hovered over */
}

.yellow-link:active {
  color: yellow; /* Ensures the link remains yellow when active */
}




/* Map Styles */
.hours-container { 
  display: flex; 
  justify-content: space-between; 
  padding: 20px;  
} 
.hours-section { 
  width: 45%; 
} 
.hours-title { 
  font-weight: bold; 
  margin-bottom: 10px; 
}
/* Default styles */
.phone-number {
  display: inline;
}

/* Media Query for Mobile Screens */
@media (max-width: 768px) {
  .phone-number {
    display: block;
    text-align: center;
    margin-top: 10px; /* Adjust the spacing as needed */
  }
}

#map {
  height: 300px;
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 0 20px 5px rgba(255, 255, 255, 0.6);
  margin: 10px auto;
  margin-bottom: -30px;
}

/* Addresses Section */
#addresses {
  margin-top: 20px;
  color: white;
  background: rgba(0, 0, 0, 0.8);
  padding: 10px;
  border-radius: 10px;
  text-align: center;
}

/* Targeting the input boxes specifically */
#start-location,
#destination,
#first-name1,
#last-name1,
#phone-number,
#passengers,
#pickup-time,
#special-requirements {
  padding: 0.75rem;
  border: none;
  border-radius: 10px; /* More rounded corners */
  font-size: 1rem;
  background: rgba(255, 255, 255, 0.1); /* Semi-transparent background */
  color: white; /* Text color */
  transition: background 0.3s, box-shadow 0.3s, transform 0.3s; /* Smooth transitions */
  box-shadow: 0 0 5px 2px rgba(255, 255, 255, 0.1); /* Subtle shadow */
  box-sizing: border-box; /* Include padding in width calculation */
  width: 100%;
  background: #1a1a1a;
  margin-bottom: 10px;
}

#start-location:focus, 
#destination:focus, 
#first-name1:focus, 
#last-name1:focus, 
#phone-number:focus,
#passengers:focus, 
#pickup-time:focus, 
#special-requirements:focus { 
  outline: none; 
  background: rgba(255, 255, 255, 0.2); /* Slightly darker background on focus */ 
  box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.5); /* Add glow effect */ 
  transform: scale(1.02); /* Slight scale on focus */
}

.input-row {
  display: flex;
  gap: 0.5rem; /* Add gap between input fields */
}

.third-width {
  flex: 1 1 33%; /* Adjust width to take up 1/3 of the container */
}

.half-width {
  flex: 1 1 50%; /* Adjust width to take up 1/2 of the container */
}



 :root {
      --card-width: 280px;
      --card-min-height: 160px;
      --gap: 1.5rem;
      --bg-accent: rgba(255,255,255,0.08);
      --caption-color: #e0e0e0;
    }

    body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background:#0f1720; color: #c8d0da; }
    .content { padding: 2rem 1rem; max-width: 1200px; margin: 0 auto; }
    h2 { margin: 0 0 0.5rem 0; color: #fff; font-size: 1.25rem; }
    .partner-intro { text-align: left; margin: 0 auto 1rem auto; padding-bottom: 1rem; max-width: 820px; color: #c8d0da; }

    /* scroll container */
    .partner-logos-scroll {
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      position: relative;
      padding: 1rem 0;
      scrollbar-width: thin;
      scrollbar-color: #666 #333;
      scroll-behavior: smooth;
    }
    .partner-logos-scroll::-webkit-scrollbar { height: 6px; }
    .partner-logos-scroll::-webkit-scrollbar-track { background: #333; border-radius: 4px; }
    .partner-logos-scroll::-webkit-scrollbar-thumb { background: #666; border-radius: 4px; }

    /* track and clone */
    .partner-logos {
      display: flex;
      gap: var(--gap);
      padding: 0.5rem;
      min-width: min-content;
      justify-content: flex-start;
      margin: 0;
      align-items: stretch;
      flex-wrap: nowrap;
    }
    .partner-logos-clone { display: flex; gap: var(--gap); }

    /* cards */
    .partner-card {
      flex: 0 0 auto;
      min-width: var(--card-width);
      max-width: 340px;
      padding: 1.25rem;
      background: var(--bg-accent);
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.2);
      transition: transform 0.3s ease;
      text-align: center;
      border: 1px solid transparent;
      box-sizing: border-box;
    }
    .partner-card:hover { transform: translateY(-3px); }

    .partner-link {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      color: inherit;
      width: 100%;
      height: 100%;
      min-height: var(--card-min-height);
      padding: 0;
      border-radius: 12px;
      transition: transform 0.35s ease, background 0.35s ease, filter 0.35s ease;
      -webkit-tap-highlight-color: transparent;
      pointer-events: auto;
      outline: none; /* allow focus-visible to show custom focus only */
    }

    .partner-logo {
      width: 100%;
      height: 120px;
      object-fit: contain;
      margin-bottom: 1rem;
      filter: drop-shadow(0 3px 6px rgba(0,0,0,0.4)) brightness(1.05);
      transition: transform 0.3s ease;
    }

    .partner-caption {
      font-size: 0.9rem;
      line-height: 1.4;
      color: var(--caption-color);
      margin-top: 0.25rem;
      text-align: center;
      word-wrap: break-word;
    }

    /* hover & focus (desktop only) */
    @media (hover: hover) and (pointer: fine) {
      .partner-link:hover {
        transform: scale(1.03);
        background: rgba(255,255,255,0.03);
        filter: brightness(1.05);
        border: 1px solid rgba(200,208,218,0.15);
        box-shadow: 0 8px 24px rgba(0,0,0,0.15);
      }
      .partner-link:hover .partner-logo { transform: scale(1.02); }

      .partner-link:focus-visible {
        border: 1px solid rgba(255,255,255,0.12);
        box-shadow: 0 0 0 6px rgba(255,255,255,0.04), 0 8px 24px rgba(0,0,0,0.12);
      }
    }

    /* mobile tweaks */
    @media (max-width: 768px) {
      :root { --card-width: 240px; }
      .partner-link { min-height: 140px; }
      .partner-logo { height: 100px; }
      .partner-caption { font-size: 0.85rem; }
      .partner-logos { gap: 1rem; padding: 0.5rem; }
    }

    @media (min-width: 1024px) {
      .partner-logos-scroll { justify-content: center; }
      .partner-logos { justify-content: center; margin: 0 auto; }
    }

    /* Respect reduced motion */
    @media (prefers-reduced-motion: reduce) {
      .partner-logos-scroll { scroll-behavior: auto; }
    }






/* General Contact Form Styling */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem; /* Reduce gap between form groups */
}

.contact-form .form-group {
  display: flex;
  flex-direction: column;
  position: relative;
}

.contact-form input,
.contact-form textarea {
  padding: 0.75rem;
  border: none;
  border-radius: 10px; /* More rounded corners */
  font-size: 1rem;
  background: rgba(255, 255, 255, 0.1); /* Semi-transparent background */
  color: white; /* Text color */
  transition: background 0.3s, box-shadow 0.3s, transform 0.3s; /* Smooth transitions */
  box-shadow: 0 0 5px 2px rgba(255, 255, 255, 0.1); /* Subtle shadow */
  box-sizing: border-box; /* Include padding in width calculation */
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.2); /* Slightly darker background on focus */
  box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.5); /* Add glow effect */
  transform: scale(1.02); /* Slight scale on focus */
}

.contact-form textarea {
  resize: vertical; /* Allow vertical resize */
}

/* Contact Form Specific Row Styling */
.contact-form .input-row {
  display: flex;
  gap: 0.5rem; /* Reduce gap between input fields */
}


/* Adjust width for third-width class elements */
.form-group.third-width {
  width: 30% !important;
}

.input-boxes {
  display: flex;
  flex-direction: column;
  gap: 0.5rem; /* Reduce gap between form groups */
  background: rgba(0, 0, 0, 0.8);
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 0 20px 5px rgba(255, 255, 255, 0.6);
  color: white;
}

.input-row {
  display: flex;
  align-items: center; /* Align items in center */
  gap: 0.5rem; /* Reduce gap between input fields */
}

.form-group {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center; /* Align items in center */
}

.form-group input:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.2); /* Slightly darker background on focus */
  box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.5); /* Add glow effect */
  transform: scale(1.02); /* Slight scale on focus */
}

.remove-button {
  cursor: pointer;
  color: red;
  font-weight: bold;
  background: none;
  border: none;
  padding: 0.75rem;
  border-radius: 10px; /* More rounded corners */
  font-size: 1rem;
  transition: color 0.3s ease, background 0.3s ease;
  margin-left: 0.5rem; /* Small margin for space */
}

.remove-button:hover {
  background: rgba(255, 255, 255, 0.2); /* Slightly darker background on hover */
  color: darkred;
}

/* Terms and Conditions Styling */
.terms-container {
  align-items: center;
  padding-top: 20px;

}
@media (max-width: 600px) {
  .terms-container {
    display: flex;
    align-items: center;
    padding-top: 30px;
  }
  
  .terms-container input[type="checkbox"] {
    margin-right: 10px; /* Add margin to the right side to create space between the checkbox and the text */
  }
  
  .terms-label {
    font-size: 14px; /* Adjust the value to set the desired font size */
    flex-grow: 1; /* Allow the label to take up the remaining space */
    text-align: left; /* Align text to the left */
  }
  
}

.booking-form .btn {
  text-decoration: none;
  padding: 0.75rem 1.5rem;
  border: 2px solid white;
  color: white;
  font-size: 1rem;
  border-radius: 5px;
  transition: all 0.3s ease;
  background-color: black;
  background: rgba(0, 0, 0, 0.8);
  cursor: pointer;
  width: 100%;
}
.booking-form .btn:hover {
  background: white;
  color: #333;
  scale: 1.05;
}

/* Review Styles */

.content-container1 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 300px; /* Set a fixed width for the container */
  height: auto;
  overflow: hidden;
  margin: 0 auto;
}

.TA_selfserveprop {
  width: 300px; /* Match the width of the container */
  height: auto;
}


/* Contact Form Styles */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem; /* Reduce gap between form groups */
}

.contact-form .form-group {
  display: flex;
  flex-direction: column;
  position: relative;
}

.contact-form input,
.contact-form textarea {
  padding: 0.75rem;
  border: none;
  border-radius: 10px; /* More rounded corners */
  font-size: 1rem;
  background: rgba(255, 255, 255, 0.1); /* Semi-transparent background */
  color: white; /* Text color */
  transition: background 0.3s, box-shadow 0.3s, transform 0.3s; /* Smooth transitions */
  box-shadow: 0 0 5px 2px rgba(255, 255, 255, 0.1); /* Subtle shadow */
  box-sizing: border-box; /* Include padding in width calculation */
  width: 100%;
  background: #1a1a1a;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.2); /* Slightly darker background on focus */
  box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.5); /* Add glow effect */
  transform: scale(1.02); /* Slight scale on focus */
}

.contact-form textarea {
  resize: vertical; /* Allow vertical resize */
}

/* Contact Form Specific Row Styling */
.contact-form .input-row {
  display: flex;
  gap: 0.5rem; /* Reduce gap between input fields */
}

/* Submit Button */
.contact-form .btn {
  text-decoration: none;
  padding: 0.75rem 1.5rem;
  border: 2px solid white;
  color: white;
  font-size: 1rem;
  border-radius: 5px;
  transition: all 0.3s ease;
  background-color: black;
  background: rgba(0, 0, 0, 0.8);
  cursor: pointer;
}

.contact-form .btn:hover {
  background: white;
  color: #333;
  scale: 1.05;
}



/* Footer */
footer {
  text-align: center;
  padding: 20px;
  color: white;
  margin-top: 20px;
}

/* Media query for desktop */
@media (min-width: 768px) {
  .content {
    max-width: 85%; /* Use relative width for more flexibility */
    padding: 40px;
  }

  #map {
    height: 500px; /* Larger map for desktop */
  }
}