.hero-content{
    position: relative !important;
    top: -5rem !important;

}

.joinUs-heroBanner{
height: 100vh !important;
}





.carrer-path{

    margin-inline: auto;

    width: 80%;

     margin-top: -4rem;

    z-index: 99;

}

.carrer-path-left h2 {

    font-weight: 600;

    font-size: 30px;

    line-height: 32px;

}

.carrer-path-left p {

    font-weight: 400;

    font-size: 20px;

    line-height: 32px;

}



.carrer-path-right img {

    max-width: 536px;
    position: relative;
    top: 16rem;

}


.work-with-us {

    display: flex;

    width: 80%;

    margin: 0 auto;

}



.work-with-us .left {

    /*  */

}



/* Form container */

.form-container {

    max-width: 600px;

    margin: 0 auto;

    padding: 2rem;

}



/* Form group with floating label */

.contact-form .form-group   {

    position: relative;

    margin-bottom: 1.5rem;

}



/* Style for input fields */

.form-control {

    width: 100%;

    padding: 1rem 0.75rem 0.5rem 0.75rem;

    font-size: 1rem;

    border: 1px solid #ced4da;

    border-radius: 0.25rem;

    background-color: #fff;

    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;

}



/* Style for labels */

.form-label {

    position: absolute;

    top: 0.8rem;

    left: 0.75rem;

    padding: 0 0.25rem;

    color: #6c757d;

    background-color: #fff;

    transition: all 0.2s ease-in-out;

    pointer-events: none;

    font-size: 1rem;

}



/* When input is focused or has content */

.form-control:focus + .form-label,

.form-control:not(:placeholder-shown) + .form-label {

    top: -0.5rem;

    left: 0.5rem;

    font-size: 0.75rem;

    color: #0d6efd;

    background-color: #fff;

    padding: 0 0.25rem;

    z-index: 10;

}



/* Focus state for input */

.form-control:focus {

    border-color: #86b7fe;

    outline: 0;

    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);

}



/* Style for form submit button */

.btn-submit {

    background-color: #0d6efd;

    color: white;

    padding: 0.5rem 1.5rem;

    border: none;

    border-radius: 0.25rem;

    cursor: pointer;

    font-size: 1rem;

    transition: background-color 0.2s ease-in-out;

}



.btn-submit:hover {

    background-color: #0b5ed7;

}



.right {

    /* width: 50%; */

}



.section-title {

  font-weight: 600;

  font-size: 25px;

  line-height: 32px;

  margin-bottom: 2rem;

}



.benefits {

  display: flex;

  flex-direction: column;

  gap: 2.5rem;

}



.benefit {

  display: flex;

  gap: 1rem;

}



.benefit-icon {

  width: 65px;

  height: 80px !important;

  flex-shrink: 0;

}



.benefit h3 {

   margin-top: 2rem;

  margin-left: -1rem;

  font-weight: 600;

  font-size: 25px;

  line-height: 32px;

  margin-bottom: 0.2rem;

}



.benefit p {

  font-weight: 400;

  font-size: 16px;

  line-height: 24px;

  letter-spacing: 0;

  color: #555;

}



.contact-form {

    padding: 0 2rem !important;

    height: 100%;

  display: flex;

  flex-direction: column;

  gap: 3rem;

}



.form-row {

  display: flex;

  gap: 1.5rem;

  flex-wrap: wrap;

}

.contact-form .form-control{

    padding: 1rem 0rem !important;

}



.contact-form input,

.contact-form textarea {

  flex: 1 1 45%;

  padding: 1rem !important;

  font-size: 1rem;

  border: none;

  border-bottom: 1px solid #ccc;

  background-color: transparent;

  outline: none;

}



.contact-form textarea {

  flex: 1 1 100%;

  min-height: 100px;

  resize: vertical;

}



.upload-btn {

  margin-top: 0.6rem;

  align-self: center;

  background-color: #56b6c2;

  color: white;

  padding: 0.9rem 1.5rem;

  font-size: 1rem;

  border: none;

  border-radius: 5px;

  cursor: pointer;

}



.upload-btn:hover {

  background-color: #409da9;

}



.joinus-steps-img img {

    width:500px;

    height: auto;

}

.joinus-steps-content{

    padding-top: 2.5rem!important;

}



.joinus-steps-title {

    color: #000;

    font-weight: 600;

    font-size: 25px;

    line-height: 32px;

}



.joinus-steps-list li {

    padding-left: 1rem;

    font-weight: 400;

    font-size: 16px;

    line-height: 24px;

    display: inline-block;

}

.joinus-steps-list li::before {

    content: "";

    display: inline-block;

    width: .5rem;

    height: .5rem;

    border-radius: 50%;

    background-color: #000;

    margin-right: 1rem;

}



.join-business-section{

    width: 80% !important;

    margin: 0 auto !important;

    padding: 2rem 0;

}



.join-business-content img {

    width: 65.45px;

    height: 80px;

    top: 4273px;

    left: 93px;

}



.join-business-main-heading {

    color: #000;

  font-weight: 600;

  font-style: SemiBold;

  font-size: 30px;

  line-height: 32px;

  text-align: center;

  margin-bottom: 1rem;

}



.join-business-sub-heading,

.join-business-highlight-sub-heading {

    color: #000;

  font-weight: 400;

  font-style: Regular;

  font-size: 20px;

  line-height: 32px;

  text-align: center;



}

.intro-text .join-business-sub-heading{

    max-width: 950px;

    margin: 0 auto;

}



.join-business-steps {

  margin: 2rem 0;

}



.join-business-steps h3,

.join-business-steps ol > li {

  text-align: start !important;

}





.steps-list {

  list-style-type: decimal;

}





.cta-block {

  text-align: center;

  margin-top: 3rem;

  margin-bottom: 2rem;

}

@media (max-width: 767.98px) {
    .joinus-steps-img img {
        width: 100%;
        height: auto;
    }
    .hero-text h4{font-weight:600 !important;}
    .hero-content{
        align-items: flex-start;
    }
    .join-us-text-img img {
        width: 70% !important;
    }
    .joinus-steps-list {
        text-align: start !important;
    }
    .joinus-steps-list li::before{
        margin-right: 0.75rem !important;
    }

}



/* Responsive styles for small devices */

@media (max-width: 640px) {
    .hero-content{
        position: relative !important;
        top: -8rem !important;
    
    }

    .joinUs-heroBanner {

        height: auto !important;

    }



    .bImgS{

        margin-top: -100px !important;

    }



    .join-us-text-img{

         box-shadow: none !important;

        background-color: transparent !important;

    }



    .join-us-text-img img {

        width: 100%;

        height: auto;

        margin-top: 2rem;

    }



    .carrer-path {

        width: 100%;

        margin-top: 0;

        padding: 0 1rem; 

    }



    .carrer-path-right {

        position: static;

        text-align: center;

    }



    .carrer-path-right img {

        max-width: 300px;
        top: -7rem;

    }

    .joinus-steps-title {

        font-size: 20px;

        line-height: 24px;

    }

    .join-business-main-heading {

        font-size: 20px;

        line-height: 24px;

        text-align: left;

    }

    .join-business-sub-heading, .join-business-highlight-sub-heading {

        font-size: 16px;

        line-height: 24px;

    }

    .work-with-us {

        flex-direction: column;

        width: 100%;

        padding: 0 1rem; /* Added x-padding */

    }

    .work-with-us h2 {

       text-align: center;

    }

    .contact-form {

        gap: 1rem;

    }

    .contact-form .form-group   {

        position: relative;

        margin-bottom: .5rem;

    }



    .benefit {

        flex-direction: column;

        align-items: center;

        text-align: center;

    }



    .benefit h3 {

        margin-left: 0;

    }



    .contact-form {

        padding: 0 1rem !important;

    }



    .form-row {

        flex-direction: column;

    }



    .joinus-steps-img img {

        width: 100%;

        height: auto;
    }



    .join-business-section {

        width: 100% !important;

        padding: 0 1rem; /* Added x-padding */

    }



    .join-business-content {

        flex-direction: column;

        align-items: center;

        text-align: center;

    }



    /* Additional x-padding for other sections */

    .recurring-hero.joinUs-heroBanner {

        padding: 0 1rem;

    }



    .recurring-cleaning-features-container {

        padding: 0 1rem;

    }

    .join-business-highlights{

        flex-direction: column;

    }



    .join-business-highlight-sub-heading{

        text-align: center;

    }



    .join-business-steps {

        padding: 0 1rem;

    }



    .cta-block {

        padding: 0 1rem;

    }

}