/* section newsletter */
    .newsletter{
        background: var(--blue);
        background-image: url(../images/background_edna.webp);
        padding: 3rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
        border-radius: 25px;
    }

    .titre_newsletter{
        font-size: 30px;
        font-weight: bolder;
    }

    .newsletter_text{
        width: 60%;
        margin: .8rem auto;
        font-size: 18px;
        text-align: center;
    }

    .newsletter form{
        position: relative;
        width: 30rem;
        display: flex;
        align-items: center;
    }

    .newsletter form input{
        width: 100%;
        padding: .6rem;
        border: var(--border);
        border-radius: .5rem;
        font-size: 15px;
        outline: none;
    }

    .newsletter form button{
        position: absolute;
        width: 3.5rem;
        right: 0;
        padding: .6rem;
        border: none;
        border-left: 3px solid var(--blue);
        border-radius: 0 .5rem .5rem 0;
        background: var(--orange);
        font-size: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        cursor: pointer;
    }
/* section newsletter */


/* section newsletter */
    @media screen and (max-width: 950px){
        .newsletter_text{
            width: 80%;
        }
    }

    @media screen and (max-width: 730px){
        .titre_newsletter{
            font-size: 25px;
        }
        
        .newsletter_text{
            font-size: 16px;
        }
    }

    @media screen and (max-width: 610px){
        .titre_newsletter{
            font-size: 23px;
        }
        
        .newsletter_text{
            font-size: 15px;
        }               

        .newsletter form input{
            padding: .4rem;
            font-size: 15px;
        }

        .newsletter form button{
            padding: .47rem;
            font-size: 18px;
        }
    }

    @media screen and (max-width: 550px){
        .newsletter{
            padding: 1.5rem 1rem;
        }
        
        .newsletter_text{
            width: 100%;
            margin: .7rem auto;
        }

        .newsletter form{
            width: 20rem;
        }
    }

    @media screen and (max-width: 480px) {
        .titre_newsletter{
            font-size: 20px;
        }

        .newsletter_text{
            font-size: 14px;
        }

        .newsletter form input{
            padding: .3rem;
            font-size: 14px;
        }

        .newsletter form button{
            padding: .37rem;
            font-size: 16px;
        }
    }

    @media screen and (max-width: 450px) {
        .newsletter form{
            width: 18rem;
        }
    }

    @media screen and (max-width: 380px){    
        .titre_newsletter{
            font-size: 17px;
        }

        .newsletter_text{
            font-size: 13px;
        }

        .newsletter form input{
            padding: .3rem;
            font-size: 13px;
        }

        .newsletter form button{
            padding: .4rem;
            font-size: 15px;
        }
    }
    
    @media screen and (max-width: 364px) {
        .newsletter{
            width: 95%;
        }
    }
/* section newsletter */