.multistep-form {
    font-family: 'Poppins', sans-serif;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    outline: none !important;
}

.ms-title {
    display: flex;
    flex-direction: row;
    margin-bottom: 30px;
}

.ms-title h2 {
    font-size: 38px;
    font-weight: 600;
    color:#6B60AD;
    line-height: 48px;
}

.ms-content h3 {
    font-size: 20px;
    line-height: 11px;
    color: #6B60AD;
    margin-bottom: 25px;
    font-weight: 600;
}

.ms-content p {
    color:#7C7C7C;
    font-size: 14px;
    line-height: 23px;
}

a.bt-submit {
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    background-color: #8367C8 !important;
    color: #FFFFFF !important;
    border-style: none !important;
    border-radius: 36px !important;
    box-shadow: 2.78px 2.78px 0px 0px #71C9EC !important;
    padding: 18px 70px 18px 70px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
}

a.bt-submit:hover {
    color: #FFFFFF !important;
    background: #A975F8 !important;
}
a.bt-submit:active {
    margin: 2px -2px 0 0;
    box-shadow: none !important;
}

a.bt-schedule:hover {
    color: #FFFFFF !important;
    background: #A975F8 !important;
}
a.bt-schedule:active {
    margin: 2px -2px 0 0;
    box-shadow: none !important;
}

a.bt-submit.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.ms-form {
    background: #A7ACDD;
    padding: 0 0 280px 0;
    margin-bottom: -145px;
}

.ms-twocol {
    display: grid;
    grid-template-columns: 85% 1fr;
    gap: 40px;
}

.ms-item {
    width: 100%;
    background: #FFFFFF;
    border-radius: 30px;
    display: flex;
    align-items: center;
    padding: 0 20px 0 0;
    position: relative;
    border: solid 3px #FFF;
    max-height: 86px;
}

.step-1 .ms-item label svg path {
    fill: #57529B;
}

.ms-item label {
    padding: 25px 25px 25px 40px;
    margin: 0 !important;
    display: flex;
}

.ms-item input,
.ms-item select {
    width: 100%;
    border: none;
    padding: 25px 0;
    font-size: 20px;
    letter-spacing: 1px;
    color: #676767 !important;
    font-family: 'Poppins', sans-serif;
    border-radius: 30px;
    outline: none;
    background: transparent;
}

.ms-item select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    padding-right: 40px;

    background-image: url("data:image/svg+xml,%3Csvg width='16' height='9' viewBox='0 0 16 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6.58579 6.58579C7.36684 7.36684 8.63317 7.36683 9.41421 6.58579L15 1' stroke='%23A975F8' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 16px 9px;

    cursor: pointer;
}

.ms-item input ::placeholder {
    color: #A4A4A4 !important;
}

.ms-item.approved {
    border: solid 3px #97DA94;
}

.ms-item.approved label {
    position: relative;
}

.ms-item.approved label::before {
    content: '✔';
    position: absolute;
    top: 23px;
    left: 39px;
    width: 34px;
    height: 34px;
    text-align: center;
    font-size: 22px;
    line-height: 34px;
    color: #FFFFFF;
    background: linear-gradient(135deg, #66bb6a, #4dd0e1);
    background-size: contain;
    z-index: 1;
    border-radius: 20px;
}

.ms-item.error {
    border: solid 3px #F08080;
}

.ms-item.error label::before {
    content: '✖';
    position: absolute;
    top: 23px;
    left: 39px;
    width: 34px;
    height: 34px;
    text-align: center;
    font-size: 22px;
    line-height: 34px;
    color: #FFFFFF;
    background: linear-gradient(135deg, #ff6b6b, #ff8e53);
    background-size: contain;
    z-index: 1;
    border-radius: 20px;
}

.ms-right  {
    display: flex;
    align-items: center;

}

.ms-header {
    margin-bottom: 10px;
}

.ms-header span {
    text-transform: uppercase;
    color:#A7ACDD;
    font-weight: 700;
    letter-spacing: 1px;
}

.ms-title h2 span {
    color:#39C2E2;
}

.ms-subtitle {
    margin-bottom: 60px;
}

.ms-subtitle h3 {
    font-weight: 400;
    color:#57529B;
}

.step {
    background: #F4F7FF;
    border-radius:0 0 30px 120px ;
    padding: 60px 80px;
    margin-bottom: 40px;
    position: relative;
    transition: transform 0.5s ease-out, opacity 0.5s ease-out; 
    transform: translateX(0);  
    overflow: hidden; 
}

.toSlide {
        position: relative;
    transition: transform 0.5s ease-out, opacity 0.5s ease-out; 
    transform: translateX(0);  
}

.slide-left {
    transform: translateX(-100%); /* Move the element out of view to the left */
}

.slide-right {
    transform: translateX(100%); /* Move the element out of view to the right */
}

.from-left {
    transform: translateX(-100%); /* Immediately place the element out of view on the left */
}

#form_part2,
#form_part3,
#form_part4 {
    display: none;
}

/* STEP 1 */

.step-1 .ms-title {
    margin-bottom: 10px;
}

.ms-submit-color {
    text-align: right;
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

.ms-submit-color a.bt-submit {
    padding:18px 70px 18px 70px !important;
    width: fit-content;
    font-size: 20px !important;
    letter-spacing: 1px !important;
}

.step-1 .bottom {
    margin-top: 60px;
}

.step-1 .bottom .step-item {
    display: flex;
    align-items: center;
}

.step-1 .role {
    padding-top: 50px;
}

.step-1 .role h2 {
    color: #57529B;
    margin-bottom: 30px;
}

.step-1 .ms-item label {
    padding:25px 25px 25px 45px;
}

.area-reason {
    max-width: 75%;
}

.step-1 .info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}


/* STEP 2 */

.step-2 .ms-content {
    padding: 30px 0 0 0;
}

.step-2 input[type=checkbox] + label.agree-sms a {
    font-weight: 600;
    color: #7C7C7C;
    text-decoration: underline;
}

.step-2 .disclaimer {
    font-size: 16px;
    color: #7C7C7C;
    letter-spacing: 1px;
    margin:5px 0 50px 10px;
}

.step-2 .info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

.step-2 .minimal-text {
    border-top: solid 1px #E9E9F6;
    margin-top: 40px;
    padding-top: 20px;
}

.step-2 .minimal-text p {
    color: #918CC5;
    font-size: 13px;
    letter-spacing: 1px;
}

/* STEP 3 */ 

.step-3 .ms-header {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.step-3 .ms-header img {
    width: 100%;
    max-width: 400px;
    margin: 0 auto 40px auto;
}

.step-3 .ms-title {
    margin-bottom: 10px;
}

.step-3 .ms-subtitle {
    color: #7C7C7C;
}

.step-3 .ms-title h2 {
    width: 100%;
    text-align: center;
}

.step-3 .ms-subtitle {
    font-size: 20px;
}

.step-3 .ms-header svg {
    margin:0 auto 30px auto;
}

.step-3 a.bt-submit {
    padding:16px 80px 16px 80px !important;
    width: fit-content;
    margin: 0 auto;
}

.step-3 a.bt-submit svg {
    width: 35px;
    height: auto;
    margin-right: 10px;
}

/* Large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) { 


}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) { 

    .area-reason {
        max-width: 100%;
    }

    .step-2 .info-grid {
        grid-template-columns: 1fr 1fr;
    }

    .step-2 .disclaimer {
        margin-bottom: 0;
    }

    .ms-submit-color {
        margin-top: 30px;
    }

    .step-1 .ms-right {
        display: none;
    }

    .step-1 .ms-twocol {
        width: 100%;
        grid-template-columns: 1fr;
    }

}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) { 

    .step {
        padding: 60px 40px;
    }

    .ms-twocol{
        grid-template-columns: 1fr;
    }

    .step-1 .info-grid,
    .step-2 .info-grid {
        grid-template-columns: 1fr;
    }


    .step-2 .minimal-text {
        padding-bottom: 30px;
    }



}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) { 

}