@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    .news {
        background: #FFFCF6;
        color: black;
        padding: 48px 0px 48px 0px;
    }

    .form-newsletter {
        background: #E4E0D6;
        padding: 48px;
        border-radius: 28px;
        font-family: "Roboto", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 14px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .form-newsletter input {
        background: white;
        padding: 16px 24px;
        border-radius: 16px;
        border: none;
        font-family: "Roboto", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 16px;
        width: 100%;
        margin: 0 12px 12px 0;
    }

    .form-newsletter button {
        background: #EA1917;
        border: 1px solid #EA1917;
        color: white;
        font-family: "Roboto", sans-serif;
        font-weight: 600;
        font-style: normal;
        font-size: 16px;
        padding: 16px 24px;
        border-radius: 100px;
        width: 100%;
    }

    .form-newsletter button:hover{
        background: #FFF;
        border: 1px solid #000;
        color: black;
        cursor: pointer;
        transition: background-color 0.2s ease;
    }
    .form-newsletter button:not(:hover){
        background: #EA1917;
        border: 1px solid #EA1917;
        color: white;
        transition: background-color 0.2s ease;
    }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    .news {
        background: #FFFCF6;
        color: black;
        padding: 48px 0px 48px 0px;
    }

    .form-newsletter {
        background: #E4E0D6;
        padding: 48px;
        border-radius: 28px;
        font-family: "Roboto", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 14px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .form-newsletter input {
        background: white;
        padding: 16px 24px;
        border-radius: 16px;
        border: none;
        font-family: "Roboto", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 16px;
        width: 100%;
        margin: 0 12px 12px 0;
    }

    .form-newsletter button {
        background: #EA1917;
        border: 1px solid #EA1917;
        color: white;
        font-family: "Roboto", sans-serif;
        font-weight: 600;
        font-style: normal;
        font-size: 16px;
        padding: 16px 24px;
        border-radius: 100px;
        width: 100%;
    }

    .form-newsletter button:hover{
        background: #FFF;
        border: 1px solid #000;
        color: black;
        cursor: pointer;
        transition: background-color 0.2s ease;
    }
    .form-newsletter button:not(:hover){
        background: #EA1917;
        border: 1px solid #EA1917;
        color: white;
        transition: background-color 0.2s ease;
    }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    .news {
        background: #FFFCF6;
        color: black;
        padding: 48px 0px 48px 0px;
    }

    .form-newsletter {
        background: #E4E0D6;
        padding: 48px;
        border-radius: 28px;
        font-family: "Roboto", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 14px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .form-newsletter input {
        background: white;
        padding: 16px 24px;
        border-radius: 16px;
        border: none;
        font-family: "Roboto", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 16px;
        width: 100%;
        margin: 0 12px 12px 0;
    }

    .form-newsletter button {
        background: #EA1917;
        border: 1px solid #EA1917;
        color: white;
        font-family: "Roboto", sans-serif;
        font-weight: 600;
        font-style: normal;
        font-size: 16px;
        padding: 16px 24px;
        border-radius: 100px;
        width: 100%;
    }

    .form-newsletter button:hover{
        background: #FFF;
        border: 1px solid #000;
        color: black;
        cursor: pointer;
        transition: background-color 0.2s ease;
    }
    .form-newsletter button:not(:hover){
        background: #EA1917;
        border: 1px solid #EA1917;
        color: white;
        transition: background-color 0.2s ease;
    }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    .news {
        background: #FFFCF6;
        color: black;
        padding: 48px 0px 48px 0px;
    }

    .form-newsletter {
        background: #E4E0D6;
        padding: 48px;
        border-radius: 28px;
        font-family: "Roboto", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 14px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .form-newsletter input {
        background: white;
        padding: 16px 24px;
        border-radius: 16px;
        border: none;
        font-family: "Roboto", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 16px;
        width: 78%;
        margin: 0 12px 0 0;
    }

    .form-newsletter button {
        background: #EA1917;
        border: 1px solid #EA1917;
        color: white;
        font-family: "Roboto", sans-serif;
        font-weight: 600;
        font-style: normal;
        font-size: 16px;
        padding: 16px 24px;
        border-radius: 100px;
        width: 20%;
    }

    .form-newsletter button:hover{
        background: #FFF;
        border: 1px solid #000;
        color: black;
        cursor: pointer;
        transition: background-color 0.2s ease;
    }
    .form-newsletter button:not(:hover){
        background: #EA1917;
        border: 1px solid #EA1917;
        color: white;
        transition: background-color 0.2s ease;
    }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1440px) {
    .news {
        background: #FFFCF6;
        color: black;
        padding: 48px 0px 48px 0px;
    }

    .form-newsletter {
        background: #E4E0D6;
        padding: 48px;
        border-radius: 28px;
        font-family: "Roboto", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 14px;
        max-width: 1440px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .form-newsletter input {
        background: white;
        padding: 16px 24px;
        border-radius: 16px;
        border: none;
        font-family: "Roboto", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 16px;
        margin: 0 12px 0 0;
    }

    .form-newsletter button {
        background: #EA1917;
        border: 1px solid #EA1917;
        color: white;
        font-family: "Roboto", sans-serif;
        font-weight: 600;
        font-style: normal;
        font-size: 16px;
        padding: 16px 24px;
        border-radius: 100px;
    }

    .form-newsletter button:hover{
        background: #FFF;
        border: 1px solid #000;
        color: black;
        cursor: pointer;
        transition: background-color 0.2s ease;
    }
    .form-newsletter button:not(:hover){
        background: #EA1917;
        border: 1px solid #EA1917;
        color: white;
        transition: background-color 0.2s ease;
    }
}

.input-content {
    margin-bottom: 24px;
    text-align: center;
}

.error {
    color: #ff4c4c;
    display: block;
    margin-bottom: 12px;
}