/*===========================
    12. Newsletter css 
===========================*/

.newsletter-area {
    padding-top: 160px;
    position: relative;
    z-index: 8;
    margin-bottom: -150px;

    @media #{$md} {
        padding-top: 100px;
    }

    @media #{$xs} {
        padding-top: 80px;
    }

    & .section-title-2{
        max-width: 355px;
    }
}

.newsletter-area-2 {
    padding-top: 160px;
    padding-bottom: 160px;
    position: relative;
    z-index: 8;

    @media #{$md} {
        padding-top: 100px;
        padding-bottom: 100px;
    }

    @media #{$xs} {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    & .section-title-2{
        max-width: 355px;
    }
}

.newsletter-area-3 {
    padding-bottom: 160px;
    position: relative;
    z-index: 8;

    @media #{$md} {
        padding-bottom: 100px;
    }

    @media #{$xs} {
        padding-bottom: 80px;
    }

    & .section-title-2{
        max-width: 355px;
    }
}

.newsletter-wrapper {
    padding: 20px 70px 45px;

    @media #{$lg} {
        padding: 20px 50px 45px;
    }

    @media #{$xs} {
        padding: 5px 30px 30px;
    }

    & .section-title-2{
        max-width: 355px;
    }
}

.newsletter-form {
    position: relative;

    & input {
        width: 100%;
        height: 70px;
        padding: 0 30px;
        padding-right: 173px;
        border: 0;
        background-color: #E2E2E2;

        @media #{$xs} {
            padding: 0 15px;
            height: 50px;
        }
    }

    & .main-btn {
        position: absolute;
        top: 0;
        right: 0;
        height: 70px;
        line-height: 70px;

        @media #{$xs} {
            height: 50px;
            line-height: 50px;
            position: relative;
            margin-top: 10px;
            width: 100%;
        }
    }
}