/* Quote page styling – matches contact-style cards */

/* ===============================
   PAGE CENTERING (FIXED)
================================ */
.quote-center {
  width: 100%;
  display: flex;
  justify-content: center;      /* Centers the content */
  padding: 20px;
  box-sizing: border-box;
}

/* Main quote container */
.quote-wrap {
  max-width: 1000px;
  width: 100%;                  /* Ensures horizontal centering */
  margin: 40px auto;            /* Center horizontally */
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 22px;
  box-sizing: border-box;
}

/* ===============================
   LEFT / RIGHT PANELS
================================ */

/* For desktop, keep .quote-left styles */
.quote-left {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 20px 60px rgba(6, 12, 30, .6);
}

/* For mobile, override .quote-left styles */
@media screen and (max-width: 768px) {
  /* Remove background, padding, or box-shadow that might affect mobile layout */
  .quote-left {
    background: none;
    padding: 0;
    box-shadow: none;
  }
}

/* Right section styles */
.quote-right {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 16px;
  padding: 22px;
}

/* ===============================
   HEADINGS
================================ */
.quote-left h2 {
  font-family: Poppins, sans-serif;
  margin: 0 0 6px;
}

.quote-lead {
  color: #9aa6b2;
  margin-bottom: 18px;
}

/* ===============================
   FORM STYLING
================================ */
.quote-form {
  display: grid;
  gap: 14px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-size: 13px;
  color: #9aa6b2;
  font-weight: 600;
}

.form-group input,
.form-group select {
  background: #071226;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 12px;
  color: #fff;
  font-size: 15px;
}

.form-group input::placeholder {
  color: #ffffff;
  opacity: 0.7;
}

/* ===============================
   VEHICLE CARD CONTAINER (WRAPPER)
================================ */
.vehicle-card-wrapper {
  display: flex;
  justify-content: center;     /* Center horizontally */
  align-items: flex-start;     /* Align to the top of the parent */
  width: 100%;                  /* Full width of the parent */
  padding: 10px;                /* Optional padding around the card */
  box-sizing: border-box;      /* Ensure padding is included in width/height */
}

/* ===============================
   VEHICLE CARD
================================ */
.vehicle-card {
  background: #071226;
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .6);
  max-width: 600px;             /* Limit the max width of the card */
  width: 100%;                  /* Ensure it fills available width inside the wrapper */
  margin: 0 auto;               /* Center horizontally */
  height: auto;                 /* Allow height to adjust based on content */
  min-height: 250px;            /* Minimum height to avoid collapsing */
  display: flex;
  flex-direction: column;       /* Ensure vertical alignment */
  justify-content: flex-start;  /* Align the content from the top */
}

/* ===============================
   MOBILE
================================ */
@media (max-width: 768px) {
  .vehicle-card-wrapper {
    padding: 10px;             /* Adjust padding for smaller screens */
  }

  .vehicle-card {
    max-width: 100%;            /* Ensure full width on mobile */
    padding: 15px;              /* Adjust padding on mobile */
    height: auto;               /* Let the height adjust based on content */
    min-height: 250px;          /* Ensure the card doesn’t collapse too much on mobile */
  }
}

/* ===============================
   BUTTON
================================ */
.cta-white {
  background: #ffffff;
  color: #041226;
  padding: 12px 24px;
  border-radius: 12px;
  border: 0;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 14px 40px rgba(4, 18, 38, 0.35);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  display: inline-block;
}

.cta-white:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 60px rgba(4, 18, 38, 0.6);
}

/* ===============================
   MOBILE
================================ */
@media (max-width: 768px) {
  .quote-wrap {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 10px;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .form-group input,
  .form-group select {
    width: 100%;
    display: block;
  }

  .vehicle-card-wrapper {
    padding: 10px;
  }

  .vehicle-card {
    max-width: 100%;
    padding: 15px;
  }

  .cta-white {
    width: 100%;
  }
}

/* General styles for date and time input fields */
input[type="date"], input[type="time"] {
  width: 100%;                /* Make the inputs full-width */
  height: 40px;               /* Standard height */
  padding: 10px;              /* Add padding for better UX */
  font-size: 16px;            /* Make text inside readable */
  border-radius: 8px;         /* Rounded corners */
  box-sizing: border-box;     /* Ensure padding is included in width/height */
  background: #071226;        /* Background color to match theme */
  color: #fff;                /* Text color for contrast */
}

input[type="date"]:focus, input[type="time"]:focus {
  outline: none;          /* Remove default focus outline */
}

/* Remove default appearance in iOS */
input[type="date"], input[type="time"] {
  -webkit-appearance: none;  /* Disables the default styling on iOS */
  appearance: none;          /* Ensures styling consistency across browsers */
}

/* For mobile devices (if needed) */
@media screen and (max-width: 768px) {
  input[type="date"], input[type="time"] {
    height: 50px;  /* Adjust height on mobile */
    font-size: 16px; /* Ensure text is legible on small screens */
  }
}

/* Add padding inside the left and right sections without centering */
.how-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:18px }
.how-step{ background:rgba(255,255,255,0.02); padding:12px;border-radius:10px;text-align:center }
.faq{ max-width:900px;margin:30px auto }
.partner-row{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:12px }
@media(max-width:900px){ .hero-full{grid-template-columns:1fr} .how-steps{grid-template-columns:1fr} }
.hero-full .left,
.hero-full .right {
  padding: 20px; /* Padding added inside left and right sections */
  box-sizing: border-box; /* Prevent padding from affecting overall width */
}

/* Existing styles */
.hero-full .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(2,6,23,0.65), rgba(2,6,23,0.6));
  z-index: 1;
}

.hero-full .left, .hero-full .right {
  position: relative;
  z-index: 2;
}

/* Add your styles for the iframe to be larger */
@media (min-width: 769px) {
  .map-container iframe {
    width: 600px; /* Larger width for desktop */
    height: 450px; /* Larger height for desktop */
  }

@media screen and (max-width: 768px) {
select.form-control::-webkit-appearance: none;
select.form-control:-moz-appearance: none;
select.form-control:appearance: none;

}

/* Input styling */
input[type="date"], input[type="time"], input[type="text"], input[type="email"] {
  width: 100%;
  height: 40px;                       /* Fixed height */
  padding: 12px;                      /* Add padding */
  font-size: 16px;                    /* Text size */
  background: #071226;                /* Background to match theme */
  color: #fff;                        /* Text color */
  box-sizing: border-box;
}

/* For mobile responsiveness (input fields) */
@media screen and (max-width: 768px) {
  input[type="date"], input[type="time"], input[type="text"], input[type="email"] {
    height: 50px !important;           /* Adjust height for mobile */
    font-size: 18px !important;        /* Adjust font size */
    padding: 12px !important;          /* Increase padding */
  }
}/* Ensure select elements are full width */
select.form-control {
  width: 100% !important;  /* Ensure select takes full width */
  padding: 12px !important;  /* Padding inside select */
  font-size: 16px !important; /* Font size */
  border-radius: 8px !important; /* Rounded corners */
  background: #071226 !important;  /* Match theme background */
  color: #fff !important;  /* Text color */
  box-sizing: border-box !important; /* Include padding in width calculation */
}

/* Ensure the form group and form row allow full width */
.form-group {
  width: 100%;  /* Allow the form group to expand fully */
}

.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media screen and (max-width: 768px) {
  .form-row {
    flex-direction: column;
  }
  select.form-control {
    height: 50px !important; /* Adjust height on mobile */
    font-size: 18px !important; /* Adjust font size for mobile */
    padding: 12px !important;   /* Increase padding for mobile */
  }
}


/* ================================
   Footer (Fully Fixed & Responsive)
   ================================ */

.footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px 24px;
  padding: 24px 20px;
  background: #050a14;
  color: #9aa6b2;
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
}

.footer span {
  white-space: nowrap;
}

.footer strong {
  font-weight: 600;
  color: #ffffff;
}

.footer-link {
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
}

.footer-link:hover {
  text-decoration: underline;
}

/* Mobile footer wrapping */
@media (max-width: 768px) {
  .footer span {
    white-space: normal;
  }
}