body, html {
    margin: 0;
    padding: 0;
    font-family: 'Arial', sans-serif;
    background: #fff; /* Assuming a light gray background */
}

.hidden{
    display: none;
}

.hero-bar {
    /* Other styles remain unchanged */
    display: flex; /* Use flexbox */
    align-items: center; /* Center items vertically */
    justify-content: start; /* Align items to the start (left) side of the container */
    position: relative; /* Ensure the hero bar can contain absolutely positioned elements */
    background-color: #1e293b; /* Assuming bg-slate-950 translates to this color */
    height: 128px; /* Set the height of the hero bar */
    padding-left: 10%;
}

.hero-bar::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    background-image: linear-gradient(to right, #4f4f4f2e 1px, transparent 1px), linear-gradient(to bottom, #4f4f4f2e 1px, transparent 1px);
    background-size: 14px 24px;
}


.logo {
    /* Adjust this class according to how you've defined your logo */
    height: 50%; /* Logo takes up 50% of the hero bar's height */
    max-height: 64px; /* 50% of 128px to ensure it doesn't exceed the container's height */
    object-fit: contain; /* Adjust this as needed to maintain aspect ratio without cropping */
}

/* Progress Bar Container */
.progress-bar-container {
    width: 100%;
    height: 5px;
    background-color: #ccc; /* Light grey background for the progress bar */
}

/* Progress Bar */
.progress-bar {
    height: 5px;
    background-color: #AC8C66; /* Use your progress color */
    width: 0%; /* Initial state of the progress bar */
}

/* Rest of your form CSS goes here Test */ 


#multistep-form {
    max-width: 800px; /* Fixed max-width for larger screens */
    margin: 50px auto; /* More margin on the top and bottom */
    text-align: center;
    background: #ffffff; /* White background for the form */
    /* box-shadow: 0 0 10px rgba(0,0,0,0.1); Soft shadow for depth */
    padding: 30px; /* Padding around the form area */
    border-radius: 8px; /* Slightly rounded corners */
}

.form-step {
    display: none; /* Hide all steps by default */
}

.form-step.active-step {
    display: block; /* Only show the active step */
    text-align: center;
}

button {
    padding: 15px 30px; /* Larger buttons */
    margin: 20px 10px; /* More space between buttons */
    border: none; /* Remove default border */
    background-color: #AC8C66; /* A green background */
    color: white; /* White text */
    font-size: 16px; /* Slightly larger font size */
    border-radius: 4px; /* Rounded button edges */
    cursor: pointer; /* Cursor to indicate it's clickable */ 
    transition: background-color 0.3s; /* Smooth background color transition */
    margin: 20 auto;
}

button:hover {
    background-color: #000000; /* Darker shade on hover */
}

input[type="submit"] {
    background-color: #f0ad4e; /* Bootstrap's btn-warning color */
    border: none;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
}

input[type="submit"]:hover {
    background-color: #ec971f; /* Darker shade on hover */
}

#step-7{
    padding: 0 20px;
}
/* Additional styles for other elements like input fields */
input[type="text"], input[type="email"], textarea {
    /* width: calc(100% - 20px); Full width minus padding */
    width: 100%;;
    padding: 10px; /* Comfortable padding inside the inputs */
    margin: 10px 0; /* Margin for spacing out elements */
    border-radius: 4px; /* Consistent border-radius */
    border: 1px solid #ccc; /* Light grey border */
    font-size: 16px; /* Matching font size */
}

/* Styling for labels or other text elements */
h2 {
    color: #333; /* Dark grey color for headings */
    margin-bottom: 20px; /* Space below headings */
}

/* Styles for choice buttons with images */
.choice-button {
    border: 4px solid transparent;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: 4px;
    background: none;
    padding: 0;
    margin-bottom: 20px; /* Space below each button */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.choice-button:hover {
    background-color: #AC8C66; /* Slightly darker on hover */
}

/* ... Previous styles ... */

.choice-container {
    margin: 20px 0;
}

.choice-button:hover img {
    transform: scale(1.05); /* Scale the image up on hover */
}
.choice-button:focus {
    border-color: #AC8C66; /* Highlight color on hover/focus */
}

/* Effect on image click - shrink and then grow */
.choice-button:active img {
    transition: transform 0.1s ease; /* Quicker transition for the click */
    transform: scale(1); /* Shrink */
}

.choice-button img {
    width: 100%; /* Make image fill the button */
    height: auto; /* Maintain aspect ratio */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transformation Added Box Shadow Transition */
    /* display: block; /* Remove any inline spacing */
    /* border-radius: 4px; /* Rounded corners for the images */
    /* vertical-align: middle; /* Aligns the image properly within the button */

}

/* Using JavaScript, add a class after a delay to grow the image */
.choice-button img.scale-normal {
    /* Return to normal size after a delay */
    transition-delay: 0.1s; /* Delay the transition */
    transform: scale(1); /* Scale back to normal size */
}

.choice-button.selected {
    border-width: 2px;
    border-color: #AC8C66; /* Highlight color to indicate selection */
}


/* ... (keep your previous CSS styles) ... */

/* Styles for Step 3, which also uses image selections */
#step-3 .services-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Creates two columns */
    gap: 20px;
    justify-items: center; /* Center items horizontally */
}

/* Styles for individual service buttons in Step 3 */
#step-3 .services-container .choice-button {
    width: 100%; /* Full width of the column */
    margin: 0; /* Reset any margins from other styles */
}
/* Correcting the alignment issue for step 1 */
#step-1 .choice-container {
    display: flex;
    flex-direction: column; /* Stack the buttons vertically */
    align-items: center; /* Center-align the buttons */
}

/* Styles for the navigation buttons container */
.navigation-buttons {
    display: inline-flex;
    align-items: center;
    gap: 6px; /* Space between buttons */
}

/* Styles for the Next button */
#next-btn {
    display: flex;
    width: 182px;
    height: 49px; /* Fixed height */
    padding: 16px 0;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    background: #AC8C66; /* Button color */
    color: white; /* Text color */
    border: none; /* No border */
    cursor: pointer;
    /* Other styling for font can be added here */
}

/* Styles for the Back button */
#prev-btn {
    display: flex;
    width: 136px;
    height: 49px; /* Fixed height */
    padding: 16px 0;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    background: transparent; /* No background color */
    color: black; /* Text color */
    border: 1px solid #000; /* Black border */
    cursor: pointer;
    /* Other styling for font can be added here */
}

/* Styles to apply when hovering over the Next button */
#next-btn:hover {
    background: #your-hover-color; /* Darker shade or different color for hover */
}

/* Styles to apply when hovering over the Back button */
#prev-btn:hover {
    background: #your-hover-background-color; /* Light shade or different color for hover */
    color: #your-hover-text-color; /* Color change for text if needed */
}

/* Ensure button text does not wrap or distort */
button {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Step 5 Budget Options Container */
#step-5 .budget-options {
    display: flex;
    justify-content: center; /* Centers the children horizontally */
    flex-wrap: wrap; /* Allow children to wrap as needed */
    gap: 20px;
    padding: 0 20px; /* Add padding on the sides */
}

/* Individual Selection Boxes */
#step-5 .selection-box {
    flex: 1 1 calc(50% - 20px); /* Adjust width calc to account for gap */
    max-width: 275px;
    margin-bottom: 0px; /* Margin at the bottom of each box */
    display: flex;
    align-items: center;
    padding: 21px 24px;
    border: 1px solid rgba(102, 112, 133, 0.30);
    border-radius: 6px;
}

.selection-box {
    width: 275px; /* Fixed width as per design */
    border: 1px solid rgba(102, 112, 133, 0.30);
    border-radius: 6px;
    padding: 21px 24px;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    cursor: pointer;
}

.selection-box label {
    width: 100%;
    display: flex;
    align-items: center;
}

/* Step 6 Timeline Options Container */
#step-6 .timeline-options {
    display: flex;
    justify-content: center; /* Centers the children horizontally */
    flex-wrap: wrap; /* Allow children to wrap as needed */
    gap: 20px;
    padding: 0 20px; /* Add padding on the sides */
}

/* Reusing the .selection-box class from Step 5 */
#step-6 .selection-box {
    flex: 1 1 calc(50% - 20px); /* Adjust width calc to account for gap */
    max-width: 275px;
    margin-bottom: 0px;
    display: flex;
    align-items: center;
    padding: 21px 24px;
    border: 1px solid rgba(102, 112, 133, 0.30);
    border-radius: 6px;
    cursor: pointer;
    /* No need to set width here as it's already defined in .selection-box */
}

#step-6 .selection-box label {
    width: 100%;
    display: flex;
    align-items: center;
}

.radio-button {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-right: 12px;
    background-color: transparent;
    border: 1px solid #667085;
}

.radio-title {
    color: #667085;
    font-family: 'Mulish', sans-serif;
    font-size: 16px;
    line-height: 24px;
}

/* Toggle the 'selected' class on the parent .selection-box when the radio is checked */
#multistep-form .form-step .selection-box.selected {
    border-color: #AC8C66; /* Your desired highlight color */
}

#multistep-form .form-step .selection-box.selected .radio-button {
    background-color: #AC8C66; /* Your desired highlight color */
}

#multistep-form .form-step .selection-box.selected .radio-title {
    color: #AC8C66; /* Your desired highlight color */
}


.hidden-radio {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.services-list{
    display: flex;
    justify-content: center;

}

.select-holder{
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    margin: 0 10px;
    flex-wrap: wrap;
}
.select-holder label{
    margin-bottom: 20px;;
}
.select-holder .circle{
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: white;
    display: inline-block;
    border: 1px solid #ccc;
    position: relative;
    top: 1px;
}
.select-holder input{
    display: none;
}
.select-holder input:checked ~ .circle{
    background: #AC8C66;
}
.notes{
    text-align: left;
    display: block;
    margin-top: 15px;
    line-height: 1.5;
}
.flex{
    display: flex;
}
.justify-between{
    justify-content: space-between;
}
.w-full{
    width: 100%;
    display: flex;
}
.w-48{
    width: 48% !important;
}
.ml-2{
    margin-left: 2% !important;
}
/* Adjustments for Smaller Screens */
@media (max-width: 768px) {
    .w-48{
        width: 100% !important;
    }
    .ml-2{
        margin: 0 !important;
    }
    .flex-col{
        flex-direction: column;
    }
    #step-3 .services-container {
        grid-template-columns: 1fr; /* Only one column on smaller screens */
    }
    #step-5 .selection-box {
        flex-basis: 100%; /* Full width on smaller screens */
        max-width: none; /* Removes any max-width restrictions */
    }
    #step-6 .selection-box {
        flex-basis: 100%; /* Full width on smaller screens */
    }

    .services-container .choice-button {
        flex-basis: 100%; /* Full width on smaller screens */
    }
    .selection-box {
        width: calc(100% - 48px); /* Full width minus padding */
        margin-bottom: 20px;
    }
}