.newsletter-section {
    .newsletter-content {
        position: relative;
        background-image: url(@/newsletter.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        width: 100%;
        padding-top: 1px;

        @media (max-width: 767.98px) {
            background-image: none;
        }

        .newsletter-bg {
            width: 100%;
            height: 100%;
            position: absolute;
            bottom: -2px;
            left: 0;
            z-index: -1;
        }

        .newsletter-detail {
            color: $white;
            padding: calc(60px + (100 - 60) * ((100vw - 992px) / (1920 - 992))) 0 calc(20px + (30 - 20) * ((100vw - 992px) / (1920 - 992)));
            padding-right: calc(40px + (100 - 40) * ((100vw - 992px) / (1920 - 992)));
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;

            @media (max-width: 767.98px) {
                padding: calc(15px + (30 - 15) * ((100vw - 320px) / (1920 - 320)));
                border-radius: calc(12px + (20 - 12) * ((100vw - 320px) / (768 - 320)));
                background-color: var(--primary-color);
            }

            h2 {
                text-transform: uppercase;
                font-weight: 700;
                line-height: 1.3;
                font-size: calc(18px + (30 - 18) * ((100vw - 320px) / (1920 - 320)));
                letter-spacing: 0.9px;
            }

            p {
                font-size: calc(15px + (18 - 15) * ((100vw - 320px) / (1920 - 320)));
                line-height: 1.5;
                color: rgba($white, 0.60);
                margin: 0;
                width: 100%;
                overflow: hidden;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                text-overflow: ellipsis;
            }

            .form-group {
                @include flex_common_1 ($dis: flex, $align: center);
                gap: 6px;
                padding-top: calc(14px + (24 - 14) * ((100vw - 320px) / (1920 - 320)));
                margin: 0;

                @media (max-width: 575.98px) {
                    flex-direction: column;
                    align-items: unset;
                }

                .form-control {
                    border-radius: 6px;
                    background-color: $white;
                    color: $light-color;
                    padding: 14px 20px;
                    border: none;

                    @media (max-width: 575.98px) {
                        padding: 10px 13px;
                    }
                }

                .btn {
                    border-radius: 6px;
                    width: max-content;
                    padding: 14px 20px;

                    span {
                        padding: 0;
                    }

                    @media (max-width: 575.98px) {
                        padding: 10px 16px;
                        font-size: 14px;

                        span {
                            display: none;
                        }
                    }
                }
            }
        }

        .newsletter-icons {
            [dir="rtl"] & {
                order: 1;
            }

            @media (max-width: 767.98px) {
                display: none;
            }

            img {
                position: absolute;
                animation: mover 2s infinite alternate;
                animation-delay: 1s;
            }

            .newsletter-1 {
                top: 140px;
                left: 70px;
                height: 90px;
            }

            .newsletter-2 {
                top: 50px;
                right: 90px;
                height: 16px;

                [dir="rtl"] & {
                    right: unset;
                    left: 90px;
                }

                @media (max-width: 991.98px) {
                    display: none;
                }
            }

            .newsletter-3 {
                bottom: -30px;
                right: 330px;
                height: 90px;

                [dir="rtl"] & {
                    right: unset;
                    left: 330px;
                }

                @media (max-width: 1366px) {
                    display: none;
                }
            }

            .man-image {
                position: relative;
                animation: none;


            }
        }
    }
}