/* Newsletter Css */

.newsletter-area {
    margin-bottom: -150px;
}

.newsletter-area .container.container-fluid {
    width: 100%;
    max-width: 100%;
    padding: 0;
    transition: all .5s;
    .newsletter-wrapper {
        border-radius: 0;
    }
}

.newsletter-area .container {
    transition: all .5s;
}

.newsletter-wrapper {
    position: relative;
    z-index: 2;
    transition: all .5s;
    &-padding {
        padding: 50px;
        @include responsive(xxs) {
            padding: 30px;
        }
        @include responsive(vxxs) {
            padding: 30px 20px;
        }
    }
    &-shapes {
        img {
            position: absolute;
            z-index: -1;
            &:nth-child(1) {
                left: 0;
                top: 0;
            }
            &:nth-child(2) {
                right: 0;
                top: 0;
            }
        }
    }
}

.newsletter-bg {
    background-color: var(--main-color-one);
}

.newsletter-contents {
    max-width: 600px;
    margin: auto;
    &-title {
        font-size: 36px;
        line-height: 42px;
        color: $white;
        font-weight: 500;
        margin: -7px 0 0;
        @include responsive(sm) {
            font-size: 32px;
            line-height: 36px;
        }
        @include responsive(xs) {
            font-size: 28px;
        }
        @include responsive(xxs) {
            font-size: 26px;
        }
        @include responsive(vxxs) {
            font-size: 24px;
        }
    }
    &-para {
        color: $white;
    }
    &-form {
        .single-input {
            position: relative;
            border-radius: 10px;
            overflow: hidden;
            .form--control {
                height: 55px;
                border: 1px solid rgba($steam-color, .7);
                background-color: $white;
                color: var(--light-color);
                outline: none;
                @include box-shadow(0, 0, 10px, rgba($white, .1));
                @include transition(.3s);
                padding: 20px;
                width: 100%;
                padding-right: 100px;
                &::placeholder {
                    color: var(--light-color);
                }
                &:focus {
                    @include box-shadow(0, 0, 10px, rgba(var(--secondary-color-rgb), .1));
                    border: rgba(var(--secondary-color-rgb), .3);
                }
            }
            button {
                position: absolute;
                right: 0;
                bottom: 0;
                height: 100%;
                border: 0;
                outline: none;
                padding: 5px 20px;
                background-color: var(--secondary-color);
                color: $white;
            }
        }
    }
}