@charset "UTF-8";

section.newsletter{
    background-color: var(--color-2);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 80px;
    padding: 80px 0px;
    
    &>div{
        text-align: center;

        &>h2{
            font-size: 30px;
        }
        &>p{
            font-size: 16px;
        }
    }
    &>form{
        display: flex;
        flex-direction: column;
        gap: 10px;

        &>label{
            padding: 6px 10px;
            border: 1px solid var(--color-white);
            border-radius: 4px;
            display: flex;
            align-items: center;
            gap: 10px;
            width: 300px;

            &>i{
                font-size: 25px;
            }

            &>input{
                background-color: transparent;
                border: none;
                outline: none;
                font-size: 16px;
                color: var(--color-white);
                width: 100%;
            }
            &>input::placeholder{
                color: #fff7;
            }
        }
        &>input{
            background-color: var(--color-1);
            padding: 10px 0px;
            border: none;
            border-radius: 4px;
            color: var(--color-white);
            font-size: 16px;
            cursor: pointer;
            transition: .2s;
        }
        &>input:hover{
            transform: scale(1.03);
        }
    }
}

@media (width < 750px){
    section.newsletter{
        flex-direction: column;
        gap: 30px;
        padding: 40px;
    }
    section.newsletter form{
        width: 100%;
    }
    section.newsletter form label {
        width: 100%;
    }
    section.newsletter > div > h2{
        font-size: 28px;
    }
}