style.css
.question {
    display: none; /* Hide all questions initially */
}
.question.active {
    display: block; /* Show active question */
}
#franchiseForm {
    padding-top: 20px; /* Add padding just to the top of the form */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#franchiseForm img {
    width: 272px;
    height: 46px;
    object-fit: contain; /* This ensures that the aspect ratio is maintained without stretching the image */
}
#franchiseForm .image-option {
    display: flex;
    justify-content: space-around; /* Adjusts the space distribution around items */
    align-items: center;
    margin: 10px auto; /* Shorthand to set vertical and horizontal margin */
    cursor: pointer;
    text-indent: -9999px; /* hide the label text */
    line-height: 0; /* adjust this if needed to align with your design */
    flex-wrap: nowrap;
}


#franchiseForm .image-radio {
    display: none; /* this hides the radio button */
}

#franchiseForm .image-option-block {
    flex: 0 0 auto;
    justify-content: center;
    align-items: center;
    margin: 0 5px; /* Reduced margin for closer appearance */
}

#franchiseForm .image-option-block img {
    display: block;
    height: 150px; /* Set a fixed height for consistency */
    object-fit: contain;
    width: 100%; /* Make the image responsive within its container */
    margin: 15px; /* Reduced margin for closer appearance */
}

#franchiseForm .image-option-block img:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease;
    border: 2px solid #000000;  /* Changed to black */
}
#franchiseForm .image-option:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease;
    border: 2px solid #000000;  /* Changed to black */
}

#franchiseForm .fquestion p {
    margin-top: 30px; /* Space above the question */
    text-align: left; /* Align text */
    font-family: 'Montserrat', sans-serif; /* Use the Montserrat font family */
    font-size: 22px; /* Adjust the size as needed */
    font-weight: bold; /* Normal font weight for the question */
    color: #ffffff; /* Use the color that matches the original form */
    margin-bottom: 10px; /* Add space below the question */
}
#franchiseForm .question p {
    text-align: center;
    font-family: 'Montserrat', sans-serif; /* Use the actual font family from the original form */
    font-size: 22px; /* Adjust the size as needed */
    font-weight: bold; /* If the original form's questions are bold */
    color: #ffffff; /* Use the color that matches the original form */
    margin-bottom: 10px; /* Add space below the question */
}

#franchiseForm input[type="text"],
#franchiseForm input[type="email"],
#franchiseForm input[type="tel"],
#franchiseForm input[name="firstName"],
#franchiseForm input[name="lastName"],
#franchiseForm input[name="state"]
{
    display: block;
    max-width: 500px;
    width: 100%; /* Adjust width as necessary */
    margin: 0 auto;
    margin-bottom: 15px; /* Space between each input */
    padding: 10px; /* Padding inside the input */
    border: 1px solid #ccc; /* Border color */
    border-radius: 5px; /* Rounded corners for the input fields */
    text-align: left;
    background-color: #ffffff;
    color: #000000;
}
#franchiseForm .question {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: left;

  }

#franchiseForm button[type="submit"] {
    background-color: #ffd500; /* Replace with the exact color from the image */
    color: #000000; /* Text color */
    border: 2px solid #ffd500; /* Border color */
    border-radius: 5px; /* Rounded corners */
    padding: 10px 20px; /* Top and bottom padding, Left and right padding */
    font-size: 18px; /* Text size */
    font-weight: bold; /* Bold text */
    text-transform: uppercase; /* Uppercase text */
    cursor: pointer; /* Pointer cursor on hover */
    transition: all 0.3s ease; /* Smooth transition for interactions */
    outline: none; /* Remove default focus outline */
    margin: 10px auto;    
    display: flex;
    max-width: 500px;
    width: 100%; /* Adjust width as necessary */
    align-items: center;
    text-align: left;
    justify-content: center;

}

#franchiseForm button[type="submit"]:hover {
    background-color: #141414; /* Slightly lighter color on hover */
    border-color: #141414; /* Border color change on hover */
    color: #ffffff; /* Text color */
}

#franchiseForm button[type="submit"]:active {
    transform: scale(0.98); /* Slightly shrink the button when clicked */
}
#finalPage {
    display: none; /* This will hide the final page initially */
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#finalPage .question,
#finalPage input[type="text"],
#finalPage input[type="email"],
#finalPage button[type="submit"] {
    width: 100%; /* or a fixed width if preferred */
    margin-bottom: 15px; /* Adjust the spacing between elements */
}

/* Ensure the inputs and button text are also centered if needed */
#finalPage .question p,
#finalPage input,
#finalPage button {
    text-align: center;
    
}

/* Base styles */
.question input[type="radio"],
.question label {
  display: block; /* stack the label and input */
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .question input[type="radio"],
  .question label {
    display: inline-block; /* place the label and input side by side */
  }
  .progress-bar {
    background-color: #69615b; /* Your custom color for mobile devices */
}
}

/* Large devices (desktops, 992px and up) */
.page {
    display: none;
    width: 100%;
    margin: 0 auto;
    padding: 20px;
}

.page .franchiseForm {
    max-width: 31.25rem; /* 500px */
}

  .question img {
    max-width: 100%; /* Make images responsive */
    height: auto; /* Maintain aspect ratio */
  }
  
  .btn-custom {
    margin-top: 20px;
    background-color: #ffd500 !important; /* Maintain your desired background color */
    border: 1px solid #ffd500; /* Keep your border settings */
    color: #ffffff !important; /* Maintain your text color */
    font-family: 'Montserrat', sans-serif; /* Use the Montserrat font family */
    font-weight: bold; /* Keep your font weight */
    font-size: 14px; /* Keep your font size or adjust as needed */
    padding: 5px 10px; /* Adjust if necessary, but might not be needed with explicit width and height */
    width: 158px; /* Double the original width of 79px */
    height: 42px; /* Set the height to 56.5px */
    cursor: pointer; /* Keep the cursor as pointer */
    margin: 5px; /* Maintain your margin */
    border-radius: 1px; /* Keep your desired border-radius */
    display: flex; /* Use flex to center content */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    text-align: center; /* Ensure text is centered if it wraps */
    width: auto;

}

/* If you have any media queries or responsive styles for .btn-custom, 
   make sure to update those as well */
@media (max-width: 767px) {
    .btn-custom {
        width: 100%; /* Full width on mobile devices */
        max-width: 316px; /* Double the original width, but with a max-width */
    }
}

/* Adjust hover, focus, and active states as needed */
.btn-custom:hover,
.btn-custom:focus,
.btn-custom:active {
    background-color: #e2e2e2; /* Lighten on interaction */
    border: 1px solid #9e9997; /* Maintain border style on hover/focus/active */
    color: #9e9997; /* Maintain text color on hover/focus/active */
}
/* Style for the + and - buttons */
.add-remove-buttons {
    font-size: 14px;
    padding: 5px 10px;
    min-width: auto;
    min-height: auto;
    cursor: pointer;
    margin: 5px;
    border: 1px solid #ffd500;
    border-radius: 5px;
    background-color: #ffd500;
    color: #000000; /* Change text color to black */
}

/* Hover effect for the buttons */
.add-remove-buttons:hover {
    background-color: #e6e6e6;
    color: #000000; /* Keep text black on hover */
}
.progress-bar {
    background-color: #ffd500;
    border-radius: 0;
    color: #000000; /* This changes the text color to black */
}

/* In case there's a separate text element inside the progress bar */
.progress-bar span {
    color: #000000;
}

/* For Bootstrap 5 progress bars that use aria-valuenow text */
.progress-bar[aria-valuenow] {
    color: #000000;
}
.progress-line{
    background-color: #ffd500;
    border-radius: 0;
}
.navigation-arrows {
    display: flex;
    justify-content: space-between; /* This will place one button at each end */
    align-items: center;
    padding: 10px 0;
}

.navigation-arrows button {
    background-color: #000000;
    border: 0px solid #000000;
    border-radius: 0px;
    padding: 5px 15px;
    cursor: pointer;
    font-size: 24px;
}

.navigation-arrows button:hover {
    background-color: #e6e6e6;
}


/* Targets the specific <div> with the class 'bottom-image' */
.bottom-image {
    position: absolute; /* Position the div absolutely within the next positioned ancestor */
    bottom: 0; /* Align the bottom of the div with the bottom of the ancestor */
    left: 0; /* Start the div from the left edge */
    right: 0; /* Stretch the div to the right edge to allow centering */
    text-align: center; /* Center the contents (the image) of the div */
}

.bottom-image img {
    display: inline; /* Change display to inline or inline-block for text-align centering to work */
    width: auto; /* Reset to default width or set a specific width if desired */
    height: auto; /* Maintain the aspect ratio of the image */
}
.header {
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    text-align: center; /* Add this line to center the header */
    font-size: 125%; /* Increase font size by 25% */
}
.header-image {
    display: block; /* Display the image as a block element */
    margin: 0 auto; /* Center the image */
    width: 100%; /* Make the image responsive */
    max-width: 50px; /* Set a maximum width for the image */
    height: auto; /* Maintain the aspect ratio */
}

.fquestion {
    /* display: flex; */
    flex-direction: column;
    align-items: flex-start; /* Aligns children (including text and select box) to the start of the container */
    justify-content: center;
    width: 500px; /* or whatever width you want */
    margin: 0 auto; /* Centers the container */
}
.fquestion p, .fquestion label {
    text-align: start;
    width: 100%; /* Full width within the container to enforce the text alignment */
    max-width: 500px; /* Optional: limit the width of the text itself */
}
/* Directly target the add-remove-buttons within fquestion to override centering */
.fquestion .add-remove-buttons {
    text-align: left; /* Align text to the left within the buttons */
}

/* Additional styling for the button itself, if necessary */
.btn-custom {
    width: auto; /* Allows the button to shrink to fit its content */
    display: block; /* Ensures the button is a block-level element */
    margin: 0 auto; /* Auto margins on left and right for horizontal centering */
}

/* Override Bootstrap's btn-block class if it's being applied */
.btn-block {
    display: block; /* Change this to 'block' from 'inline-block' if you want it to be centered with auto margins */
    width: auto; /* Reset the width to allow 'auto' horizontal margins to center the element */
    margin-left: auto;
    margin-right: auto;
}
/* Container for both zip code inputs and add/remove buttons */
.zip-code-full-container {
    display: flex;
    justify-content: space-between; /* Adjust based on desired spacing */
    align-items: center;
    max-width: 500px;
    margin: 0 auto 15px; /* Centers the container and adds space below */
}

/* Style for zip code inputs container */
#zipCodesContainer {
    flex-grow: 1; /* Allows the input container to take up available space */
    display: flex;
    flex-direction: column; /* Organizes the inputs in a column */
    margin-right: 10px; /* Adds some space between inputs and buttons */
}

/* Style for individual zip code inputs */
.zip-code-input {
    width: 100%; /* Makes each input take up the full width of its container */
    padding: 10px; /* Padding inside the input */
    border: 1px solid #ccc; /* Border color */
    border-radius: 5px; /* Rounded corners for the input fields */
    margin-bottom: 5px; /* Space between inputs */
    background-color: #ffffff;
    color: #000000;
    /* No need to set max-width or margin auto since it's 100% width within a flex container */
}

/* Style for the + and - buttons container */
.zip-code-buttons-container {
    display: flex;
    flex-direction: row; /* Displays buttons side by side */
    justify-content: center; /* Center buttons horizontally */
    align-items: center; /* Aligns items vertically */
    gap: 10px; /* Adds space between the + and - buttons */
}

/* Style for the + and - buttons */
.add-remove-buttons {
    margin-bottom: 5px; /* Adds space between the + and - buttons */
}
.custom-select {
    display: inline-block;
    position: relative;
    width: 100%;
    max-width: 500px;
    margin: 10px auto;
    justify-content: center; /* Center buttons horizontally */
    align-items: center; /* Aligns items vertically */
}
@media (max-width: 767px) {
    #franchiseForm, #finalPage .question, #finalPage input, #finalPage button {
        padding: 10px;
        width: calc(100% - 20px); /* Adjust for padding */
        max-width: none;
    }

    #franchiseForm .image-option {
        flex-direction: column;
        align-items: stretch;
    }

    #franchiseForm .image-option-block img {
        width: auto;
    }
    .fquestion {
        flex-direction: column;
        align-items: flex-start; /* Aligns children to the start of the container */
        justify-content: center;
        width: auto; /* Allow it to be based on the viewport width */
        margin: 0 10px; /* Add margin to avoid touching the viewport edges */

    }
}

body {
    background-color: #000000;
    color: #ffffff; /* This will make the text white for better contrast */
}

/* You might also want to update these for better contrast */
#franchiseForm .question p,
#franchiseForm .fquestion p,
#franchiseForm label {
    color: #ffffff;
}

/* Update input backgrounds for better contrast */
#franchiseForm input[type="text"],
#franchiseForm input[type="email"],
#franchiseForm input[type="tel"],
#franchiseForm input[name="firstName"],
#franchiseForm input[name="lastName"],
#franchiseForm input[name="state"],
.custom-select,
.zip-code-input {
    background-color: #ffffff;
    color: #000000;
}

/* Style for next buttons */
.next-button, 
.btn-next, 
button.next {
    color: #000000 !important; /* Black text color */
    font-weight: bold; /* Keep text bold for better visibility */
}

/* Hover state for next buttons */
.next-button:hover, 
.btn-next:hover, 
button.next:hover {
    color: #000000 !important; /* Keep black text on hover */
}

/* Also target any buttons with the navigation class */
.navigation-arrows button {
    color: #000000 !important; /* Black text color */
}

.navigation-arrows button:hover {
    color: #000000 !important; /* Keep black text on hover */
}

/* Update progress bar background to black */
.progress {
    background-color: #000000 !important; /* Black background for the empty part */
    border-radius: 0; /* Keep the non-rounded corners */
}

/* Keep the progress indicator yellow */
.progress-bar {
    background-color: #ffd500; /* Yellow for the filled part */
    border-radius: 0;
    color: #000000; /* Black text */
}

/* For the progress line if it's a separate element */
.progress-line {
    background-color: #ffd500;
    border-radius: 0;
}

/* Keep back button icon white */
.back-button, 
button.back {
    color: #ffffff !important; /* White color for back buttons */
}

.back-button:hover, 
button.back:hover {
    color: #ffffff !important; /* Keep white on hover */
}

/* If the back button is in the navigation arrows, target it specifically */
.navigation-arrows button.back-button {
    color: #ffffff !important;
}

.navigation-arrows button.back-button:hover {
    color: #ffffff !important;
}
/* Make the label a flex container for better alignment */
.sms-opt-in label {
    display: flex;
    flex-direction: row;      /* Keep items in a row */
    align-items: center;      /* Vertically center */
    gap: 12px;                /* Space between checkbox and text */
    padding: 12px 0;
    cursor: pointer;
    user-select: none;
    flex-wrap: nowrap;        /* Prevent wrapping */
}

/* Add space between checkbox and text */
.sms-opt-in input[type="checkbox"] {
    margin-right: 0;          /* Remove default margin */
    width: 24px;
    height: 24px;
    accent-color: #000;
}

/* Make the text more readable on black background */
.sms-opt-in span {
    color: #fff;
    font-size: 1rem;
    line-height: 1.2;
    white-space: normal;      /* Allow wrapping if text is too long */
}

@media (max-width: 400px) {
  .sms-opt-in label {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}

.sms-opt-in {
    margin-left: 0 !important;
    padding-left: 0 !important;
}