/* responsive*/
@media only screen and (max-width: 500px) {
    section#how {
    margin-bottom: 34px;
}
    .footer-contact-list li {
        flex-direction: row;
        align-items: center;
    }

    .footer-contact-list a,
    .footer-contact-list p {
        font-size: 14px; /* Slightly smaller text for mobile */
    }
    .step{
        padding: 36px 20px !important;
    }
    .form-navigation{
        text-align: center;
    }
    .add-btn, .form-navigation button {
        padding: 6px 9px !important;
    }
    .bhk-buttons{
        flex-wrap: wrap;
    }
    button.add-btn{
        padding: 20px 16px !important;
    }
    span.step-no.bottom-line {
        font-size: 25px !important;
    }
    .modal-content{
        width: 88% !important;
    }
    .document-container{
        width: 100% !important;
    }
    .form-title {
        padding: 0px 0px 20px 0px !important;
    }
    .step-progress {
        width: 100% !important;
        margin-top: 30px;
    }
    .container.bannerresp {
        padding-top: 80px !important;
    }
    .container.calcu{
        display: flex;
            flex-direction: column;
        }
    .btn-group.mobileresp {
        display: flex;
        flex-direction: column;
    }
    .popupbtn{
        width: 250px !important;
        height: 200px !important;
    }
    .custom-popup{
        width: 250px !important;
        height: auto !important;
    }
    h2.mobilepopup {
        font-size: 30px !important;
    }
    .h5-feature-card-container{
        height: auto !important;
    }
    .h7-funfact .funfact-v2__content span {
        font-size: 20px;
    }
    .h7-funfact .funfact-v2__label{
        text-align: center;
    }
    .h7-section-heading-main{
        font-size: 24px;
    }
    .col-md-6.col-lg-4.aos-init.aos-animate{
        margin-top: 0px;
    }
    .footer-copyright__text {
        text-align: center;
    }
    .mobileicon{
            padding-left: 0px !important;
       
    }
}

/* responsive end  */

/* New css responsive desktop */
.step-progress {
    width: 50%;
}
.modal-content-menu {
    margin: 25px;
}
.row.counterresp {
    background: transparent;
    border-radius: 20px;
    border: 1px solid #e4e4e7;
    margin: 0px;
}
.h7-funfact .funfact-v2__inner {
    border: none !important;
}
.col-md-6.col-12.typeofdoc{
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    padding: 20px;
    
}
.col-md-6.col-12.pricest{
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    padding: 20px;
}
.container.bannerresp {
    padding-top: 140px;
}
/* New css responsive desktop end */

.step { display: none; }
        .active { display: block; }
        .form-navigation { margin-top: 20px; }
        .required { color: red; }
        .form-section { margin-bottom: 15px; }
        input, select { margin: 5px 0; padding: 8px; width: 300px; }
        .inline-fields { display: flex; gap: 20px; }
        table { margin: 15px 0; border-collapse: collapse; }
        td, th { font-size: 14px; font-weight: 600;padding: 8px; border: 1px solid #ddd; }

        .step {
            /* width: 100%; */
            /* margin: auto; */
            padding: 45px 20px;
            /* background: #fff; */
            /* border-radius: 8px; */
            /* box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); */
        }
        .form-section, .inline-fields {
            margin-bottom: 15px;
        }
        input, select, textarea {
            width: 100%;
            padding: 8px;
            border: 1px solid #ccc;
            /* border-radius: 5px; */
        }
        .add-btn, .form-navigation button {
            background: #ffc107;
            border: none;
            padding: 10px 15px;
            border-radius: 5px;
            cursor: pointer;
        }
        .preview {
            background: red;
            color: white;
        }


/* form 1*/
span.step-no.bottom-line {
    border-bottom: 2px solid #F5BB00;
    font-size: 27px;
}
.form-title {
    padding: 40px 0px 20px 0px;
    font-weight: 700 !important;
}
label{
    font-weight: 500;
    line-height: 1.2;
    font-family: "Jost", sans-serif;
}

select:hover {
    border: 1px solid #F5BB00;
}
select#minimumlock {
    color: black;
}
.fixtures {
    display: flex;
}
input#custom-option-input {
    width: 300px;
    /* height: 60px; */
    margin-right: 10px;
}
button.add-btn{
    padding: 15px 30px;
    cursor: pointer;
    background-color: green;
    color: white;
    border: none;
    border-radius: 3px;
   
}

/* delete button  */
button.delete {
    background-color: red;
    border: red;
    padding: 9px;
    color: white;
}
/* -----------------------------------form 2------------------------------  */


/* progress bar */
.progress-bar.step2 {
    width: 50% !important;
}
.progress-bar.step3 {
    width: 70% !important;
}
.progress-bar.step4 {
    width: 100% !important;
}

/* -------------------bhk buttons----------------------- */
.bhk-buttons {
    display: flex;
    gap: 10px;
}

.bhk-buttons input[type="radio"] {
    display: none;
}

.bhk-buttons label {
    padding: 8px 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
    background-color: #f9f9f9;
    transition: all 0.3s;
}

.bhk-buttons input[type="radio"]:checked + label {
    background-color: #FFF6D9;
    color: #F5BB00;
    border-color: #F5BB00;
}

/* ----------------------------bathroom buttons--------------- */
.bathroom-buttons {
    display: flex;
    gap: 10px;
}

.bathroom-buttons input[type="radio"] {
    display: none;
}

.bathroom-buttons label {
    padding: 8px 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
    background-color: #f9f9f9;
    transition: all 0.3s ease;
}

.bathroom-buttons input[type="radio"]:checked + label {
    background-color: #FFF6D9;
    color: #F5BB00;
    border-color: #F5BB00;
}

.input-field-placeholder::placeholder {
    color: light-dark(graytext, rgb(170, 170, 170));
    font-size: 16px;
    font-weight: 500;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}


/* land lord  */
button#landlordbtn {
    color: white;
    background-color: #F5BB00;
    border: none;
    padding: 8px;
    border-radius: 6px;
}
/* Tenant  */
button#tenantbtn {
    color: white;
    background-color: #F5BB00;
    border: none;
    padding: 8px;
    border-radius: 6px;
}


/* preview popup*/
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 80%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

/* The Close Button */
.close {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.modal-header {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}

.modal-body {padding: 2px 16px;}

.modal-footer {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}
.imgsz {
    width: 35% !important;
}

/* responsive   */
@media only screen and (max-width: 500px){
    img.imgsz {
        width: 100% !important;
        margin-bottom: 24px;
    }
    .header-row {
        position: absolute !important;
    }
}