/* styles.css */

/* Base font size slightly larger than normal */
body {
    font-size: 1.1rem;
}

/* Color scheme */
body {
    background-color: #4CAF50;
    color: #333333;
}

.navbar {
    background-color: #007bff; /* Blue */
}

.navbar .navbar-brand, 
.navbar .nav-link {
    color: #ffffff;
}

.navbar .nav-link:hover {
    color: #d4edda;
}

footer {
    background-color: #f8f9fa;
}

h1 {
    color: #007bff;
}

/* Ensure the body and html are not constrained to the viewport height */
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%; /* Allow the page to grow beyond the viewport */
    overflow-x: hidden; /* Prevent horizontal scrolling */
}
input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px white inset;
  -webkit-text-fill-color: #333;
}
.hero-section {
    background-image: url('/images/hero.webp'); /* Your hero background image */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: auto; /* Let content determine the height */
    width: 100vw; /* Full viewport width */
    padding: 60px 0; /* Add padding to create space */
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

/* Hero overlay for better text visibility */
.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* 50% opacity overlay */
    z-index: 1;
}

.hero-section .hero-content {
    z-index: 2; /* Ensure text is above the overlay */
    color: white; /* Set text to white */
}

.hero-section .headline {
    font-size: 2.5rem; /* Adjust font size */
    font-weight: bold;
    color: white; /* Specifically set the headline text to white */
}

.hero-section .subheadline {
    font-size: 1.5rem; /* Adjust the subheadline */
    margin-top: 10px;
}

.hero-section .btn-primary {
    margin-top: 20px;
    font-size: 1.2rem;
    padding: 10px 20px;
    color: white; /* Ensure the button text is also white */
}

/* Why Choose Us Section */
.why-choose-us-section {
    background-color: #4CAF50; /* Brighter green background */
    color: white;
    padding: 40px 20px; /* Further reduced padding at the bottom to move text up */
    text-align: center;
}

.why-choose-us-title {
    font-size: 3rem; /* Increase the font size for the title */
    margin-bottom: 20px;
    font-weight: bold;
}

.why-choose-us-list {
    list-style-type: none; /* Remove default bullets */
    padding-left: 0;
    max-width: 1000px; /* Increase the maximum width for a wider text area */
    margin: 0 auto; /* Center the text */
    text-align: left; /* Align text and bullets to the left */
}

.why-choose-us-list li {
    font-size: 1.5rem; /* Increase the font size for the list items */
    margin-bottom: 15px;
    position: relative;
    padding-left: 30px; /* Spacing for the bullets */
    display: flex;
    align-items: center; /* Align bullets with text */
}

.why-choose-us-list li::before {
    content: "\2022"; /* Unicode bullet point */
    color: white; /* Bullet color */
    font-size: 2rem; /* Increase bullet size */
    margin-right: 10px; /* Space between bullet and text */
    display: inline-block;
}

/* How It Works Section */
.how-it-works-section {
    background-color: #f8f9fa; /* Light background for contrast */
    color: black;
    padding: 60px 20px;
    text-align: center;
}

.how-it-works-title {
    font-size: 3rem;
    margin-bottom: 40px;
    font-weight: bold;
}

.steps {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 40px;
}

.step {
    flex: 1;
    min-width: 250px;
    max-width: 300px;
    padding: 20px;
    border: 2px solid #dee2e6; /* Border for the card */
    border-radius: 8px; /* Rounded corners */
    background-color: white; /* White background for each card */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Light shadow for depth */
    text-align: center;
    transition: transform 0.3s ease; /* Add hover effect */
}

.step:hover {
    transform: translateY(-5px); /* Slight hover effect */
}

.step h3 {
    font-size: 2rem;
    margin-bottom: 10px;
}

.step p {
    font-size: 1.2rem;
}

/* Call to Action Button */
.cta {
    margin-top: 60px; /* Increased space between the cards and the button */
}

.cta .btn {
    font-size: 1.8rem; /* Bigger font size for the button text */
    padding: 20px 40px; /* Bigger padding for a larger button */
    background-color: #007bff; /* Bootstrap primary color */
    color: white;
    border: none;
    border-radius: 8px;
    text-transform: uppercase;
    width: 100%; /* Make button wider */
    max-width: 400px; /* Constrain max-width */
    margin: 0 auto; /* Center the button */
}

.cta .btn:hover {
    background-color: #0056b3; /* Darker blue on hover */
}

.inputbox {
    border: 1px solid black; /* 1px black border */
    border-radius: 2px; /* 2px rounded corners */
    padding: 5px; /* Optional: Add padding inside the box */
    margin-bottom: 1rem; /* Optional: Maintain spacing with other elements */
}

/* Style for the label inside the inputbox */
.inputbox .form-label {
    font-size: 1.1rem; /* Reduce the font size */
    color: #000000; /* Lighten the label text (Bootstrap muted color) */
    margin-bottom: 0.2rem; /* Reduce space below the label */
}

/* Style to remove the border from the input box */
.inputbox .form-control {
    font-size: 1.1rem; /* Reduce the font size */
    border: none; /* Remove the border */
    box-shadow: none; /* Remove any shadow from Bootstrap's default styles */
    padding: 5px;
    background-color:  light-dark(rgb(232, 240, 254), rgba(70, 90, 126, 0.4)) !important;;
    color: fieldtext !important;
}


/* FAQ Section */
.faq-section {
    background-color: #f0f0f0; /* Light grey background */
    padding: 60px 20px;
    text-align: center;
}

.faq-title {
    font-size: 3rem;
    margin-bottom: 40px;
    font-weight: bold;
}

.faq {
    max-width: 800px;
    margin: 0 auto;
    text-align: left;
}

.faq-item {
    margin-bottom: 20px;
}

.faq-question {
    font-size: 1.5rem;
    background-color: transparent;
    border: none;
    color: #007bff; /* Bootstrap primary color */
    text-align: left;
    width: 100%;
    padding: 10px 0;
    cursor: pointer;
    outline: none;
}

.faq-question:hover {
    text-decoration: underline;
}

.collapse {
    padding: 10px 0;
}

/* Section Divider */
.section-divider {
    border: none;
    height: 4px;
    background-color: #007bff; /* Bold color for the divider */
    margin: 40px 0; /* Add spacing between the divider and the content */
}

/* Pricing Section */
.pricing-section {
    background-color: #ffffff; /* Different background color to create contrast */
    padding: 60px 20px;
    text-align: center;
}

.pricing-card {
    background-color: #f8f9fa;
    border: 2px solid #dee2e6;
    border-radius: 8px;
    padding: 40px;
    max-width: 400px;
    margin: 40px auto 0 auto; /* Add spacing above the card */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Light shadow for depth */
}

.pricing-card h3 {
    font-size: 2rem;
    margin-bottom: 20px;
    font-weight: bold;
}

.pricing-card .price {
    font-size: 3rem;
    font-weight: bold;
    color: #007bff; /* Bootstrap primary color */
    margin-bottom: 10px;
}

.pricing-card .price span {
    font-size: 1.5rem;
    color: #6c757d; /* Muted color for "/ week" */
}

.pricing-card .details {
    font-size: 1.2rem;
    color: #6c757d; /* Muted color for details */
    margin-bottom: 30px;
}

.pricing-card .btn {
    font-size: 1.5rem;
    padding: 15px 30px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 8px;
    text-transform: uppercase;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
}

.pricing-card .btn:hover {
    background-color: #0056b3; /* Darker blue on hover */
}

/* Style for limiting the form width */
#signup-form {
    max-width: 600px; /* Set a max-width to reduce the form size */
    margin: auto; /* Center the form horizontally */
}

/* Optional: Add some padding or border-radius 
#signup-form .form-control {
    border-radius: 8px;
}
*/

#signup-form button[type="submit"] {
    background-color: #007bff;
    border: none;
    border-radius: 8px;
}

#signup-form button[type="submit"]:hover {
    background-color: #0056b3;
}


/* Why Choose Us Section */
.signup-section {
    background-color: #4CAF50; /* Brighter green background */
    padding-top: 25px;
    padding-bottom: 100px;
}

.pickup-section {
    background-color: #4CAF50; /* Brighter green background */
    padding-top: 25px;
    padding-bottom: 15px;
}

.location-section {
    background-color: #4CAF50; /* Brighter green background */
    padding-top: 25px;
    padding-bottom: 9px;
}

.login-section {
    background-color: #4CAF50; /* Brighter green background */
    padding-top: 25px;
    padding-bottom: 150px;
}

.account-section {
    background-color: #4CAF50; /* Brighter green background */
    padding-top: 25px;
    padding-bottom: 150px;
}

.payment-section {
    background-color: #4CAF50; /* Brighter green background */
    padding-top: 25px;
    padding-bottom: 10px;
}
.dashboard-section {
    background-color: #4CAF50; /* Brighter green background */
    padding-top: 25px;
    padding-bottom: 10px;
}

.overview-section {
  padding: 3rem 1rem;
}
.pricing-card {
  border: 2px solid #007bff;
  border-radius: 8px;
  padding: 2rem;
  background-color: #f8f9fa;
}
.pricing-card h3 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}
.pricing-card small {
  color: #6c757d;
}

.overview {
    color: white;
}

/* generated by GPT */
/* Header background color slightly darker than white */
.basicnav {
    background-color: #f8f9fa; /* Light gray */
    border-bottom: 1px solid #e0e0e0; /* Slightly darker border */}

/* Sign In / Sign Out link styling */
a.nav-link.sign-link {
    font-weight: 600; /* Semi-bold */
    font-size: 1.3rem; /* Adjust size as needed */
    margin-right: 25px; /* Shift slightly to the left relative to its container */
    color: #000000; /* Text color */
    text-decoration: none; /* No underline by default */
}

a.nav-link.sign-link:hover {
    text-decoration: underline; /* Add underline on hover */
    color: #000000; /* Text color */
}


.addr-row {
    display: flex;
    flex-wrap: wrap; /* Ensure responsiveness */
    gap: 1rem; /* Add spacing between inputs */
}

.city-input {
    flex: 2; /* Make the city input take the most space */
}

.state-input {
    flex: 0 0 auto; /* Prevent it from stretching */
    width: 80px; /* Approximate width for 4 characters */
}

.zip-input {
    flex: 0 0 auto; /* Prevent it from stretching */
    width: 100px; /* Approximate width for 5 characters */
}

.dashboard-card {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Stronger and more visible */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid rgba(0, 0, 0, 0.05); /* Optional soft edge */
}

.dashboard-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); /* More lift on hover */
}

.dashboard-card h5 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  color: #343a40;
}

.dashboard-card p {
  flex-grow: 1;
  font-size: 0.95rem;
  color: #6c757d;
}

.dashboard-card .btn {
  margin-top: 1rem;
}

.dashboard-title {
  font-size: 2rem;
  font-weight: 600;
  color: #ffffff; /* slightly off-white (light gray) */
  text-align: left;
}

/* Responsive adjustments */
@media (max-width: 576px) {
    /* Small devices */
}

@media (min-width: 577px) and (max-width: 768px) {
    /* Medium devices */
}

@media (min-width: 769px) and (max-width: 992px) {
    /* Large devices */
}

@media (min-width: 993px) {
    /* Extra large devices */
}

@media (max-width: 576px) {
    .addr-row {
        flex-direction: column; /* Stack the inputs on smaller screens */
    }

    .city-input, .state-input, .zip-input {
        flex: 1 1 100%; /* Make all inputs full width */
        width: 100%; /* Override specific widths */
    }
}



/* Responsive adjustments for small devices (phones) */
@media (max-width: 576px) {

    /* General text scaling for mobile */
    body {
        font-size: 1rem; /* Slightly smaller font for better fit */
    }

    /* Navbar adjustments */
    .navbar .navbar-brand span {
        font-size: 1.2rem; /* Adjust brand name size */
    }

    .navbar .nav-link {
        font-size: 1rem; /* Slightly smaller nav links */
        text-align: center; /* Center nav links in mobile dropdown */
    }

    /* Hero Section */
    .hero-section {
        padding: 40px 10px; /* Reduce padding */
    }

    .hero-section .headline {
        font-size: 4rem; /* Smaller headline for smaller screens */
    }

    .hero-section .subheadline {
        font-size: 1.2rem;
    }

    .hero-section .btn-primary {
        font-size: 1rem;
        padding: 8px 16px; /* Reduce button padding */
        width: 100%; /* Full-width button for mobile */
        max-width: 300px;
    }

    /* Why Choose Us Section */
    .why-choose-us-title {
        font-size: 2rem; /* Smaller section title */
    }

    .why-choose-us-list li {
        font-size: 1.2rem;
        padding-left: 20px; /* Reduce padding for bullets */
    }

    /* How It Works Section */
    .how-it-works-title {
        font-size: 2rem;
    }

    .steps {
        flex-direction: column; /* Stack steps vertically */
        gap: 20px; /* Reduce space between steps */
    }

    .step {
        padding: 15px; /* Reduce padding inside cards */
    }

    .step h3 {
        font-size: 1.5rem;
    }

    .step p {
        font-size: 1rem;
    }

    .cta {
        margin-top: 40px;
    }

    .cta .btn {
        font-size: 1.2rem;
        padding: 12px 20px;
        width: 100%;
        max-width: 300px;
    }

    /* Pricing Section */
    .pricing-card {
        padding: 20px; /* Reduce padding for smaller screens */
    }

    .pricing-card h3 {
        font-size: 1.8rem;
    }

    .pricing-card .price {
        font-size: 2.5rem;
    }

    .pricing-card .details {
        font-size: 1rem;
    }

    .pricing-card .btn {
        font-size: 1.2rem;
        padding: 10px 20px;
    }

    /* FAQ Section */
    .faq-title {
        font-size: 2rem;
    }

    .faq-question {
        font-size: 1.2rem;
        padding: 8px 0;
    }

    .collapse {
        font-size: 1rem;
        padding: 5px 0;
    }

    /* Footer */
    footer p {
        font-size: 0.9rem;
    }

    /* Form Adjustments */
    #signup-form {
        padding: 20px;
    }

    #signup-form .form-control {
        font-size: 1.2rem;
    }

    #signup-form button[type="submit"] {
        font-size: 1.2rem;
        padding: 10px;
    }

    /* Address Input Adjustments */
    .addr-row {
        flex-direction: column; /* Stack address fields */
    }

    .city-input, .state-input, .zip-input {
        width: 100%; /* Full width for address fields */
        margin-bottom: 10px; /* Add spacing between fields */
    }
}
:root {
  --placeholder-color: #a9a9a9 ;
}

::placeholder {
  color: var(--placeholder-color, red) !important;
}
::-webkit-input-placeholder {
  color: var(--placeholder-color, red) !important;
}
::-moz-placeholder {
  color: var(--placeholder-color, red) !important;
}
:-ms-input-placeholder {
  color: var(--placeholder-color, red) !important;
}
:-moz-placeholder {
  color: var(--placeholder-color, red) !important;
}