.referral-main__container {
    padding: 4rem;
    background: url("../img/referral-bg.webp")no-repeat;
    /* background-position: center; */
    background-size: cover;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.header-subtext__wrapper {
    display: flex;
    align-items: center;
}

.header-subtext__wrapper>p:nth-child(1) {
    font-weight: 900;
    padding-right: 1rem;
}

.header-subtext__wrapper>p:nth-child(2) {
    padding-left: 1rem;
    max-width: 940px;
    border-left: solid 3px #404040;
}

.referral-input-style {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}

.referral-input-style>input {
    padding: 0.5rem;
    border-radius: 5px;
    border: solid 1px #B9B9B9;
    outline: none;
    width: 100%;
}

.row-ref__wrapper {
    display: flex;
    gap: 1.5rem;
}

.referral-header__wrapper {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.heading-text {
    font-size: 18px;
    font-weight: 900;
}

.referral-inputs__container {
    display: flex;
    flex-direction: column;
    gap: 2.3rem;
}

.row4-align-items {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.med-reason__wrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 7rem 1rem 0;
    /* border-right: solid 3px #404040; */
}

.others-and-discharge {
    display: flex;
    gap: 3rem;
}

.referral-input-style>select {
    padding: 0.5rem;
    border-radius: 5px;
    border: solid 1px #B9B9B9;
}

.doctor-visit__wrapper {
    display: flex;
    align-items: center;
}

.row4-ref__wrapper {
    gap: 3rem;
}

.row5-ref__wrapper {
    align-items: center;
}

.row5-ref__wrapper>button {
    padding: 0.5rem;
    background-color: #EDC55A;
    border-radius: 5px;
    border: none;
    width: 100%;
    max-width: 200px;
}

.row5-ref__wrapper>textarea {
    border-radius: 5px;
    border: solid 2px #B9B9B9;
    padding: 0.5rem;
    outline: none;
    width: 435px;
    resize: none;
}


.ref-normal-size {
    max-width: 380px;
}

.ref-long-size {
    max-width: 500px;
}

.ref-small-size {
    max-width: 248px;
}

.nav-ref {
    background-color: #EDC55A;
    width: 121px;
    border-radius: 10px 10px 0 0;

}

.nav-ref>img {
    filter: contrast(31.5);
}

div.nav-ref>p {
    color: #fff;
    font-weight: bold;
}

.mob-ref__wrapper{
    display: flex;
    flex-direction: column;
    gap: 2.3rem;
}

.mob-nav-ref{
    background-color: #EDC55A;
}


.mob-nav-ref > p{
    color: #fff;

}

.mob-nav-ref> img {
    filter: brightness(5);

}


@media screen and (max-width:600px) {
    .header-subtext__wrapper {
        flex-direction: column;
        align-items: flex-start;
        font-size: 12px;
    }

    .header-subtext__wrapper>p:nth-child(2) {
        border-left: unset;
        padding-left: 0;
    }

    .header-subtext__wrapper>p:nth-child(1) {
        padding-right: 0;
    }

    .row1-ref__wrapper {
        flex-direction: column;
    }

    .ref-normal-size {
        max-width: unset
    }

    .referral-main__container {
        gap: 1rem;
        padding: 2rem;
        background: url("../img/mob-ref-bg.jpg")no-repeat;
        background-size: 531px;
        background-color: #F0F4F7;
    }

    .referral-header__wrapper {
        gap: 1rem;
    }

    .row-ref__wrapper {
        flex-direction: column;
    }

    .ref-small-size {
        max-width: unset;
    }

    .mob-ref__wrapper{
        flex-direction: row;
        gap: 1rem;
    }

    .referral-input-style > label{
        font-size: 12px;
    }

        .med-reason__wrapper{
            padding: unset;
        }

        .row5-ref__wrapper>textarea{
            width: 100%;
        }
}