.sub-container {

    padding: var(--tb-val-m) var(--p-inline);

    color: var(--clr-white);

    text-align: center;

    background-color: var(--acc-purple);

    /* background-image: url("../images/content/sub/sub-bg.png"); */

    background-size: 100% auto;

    background-position: top center;

    background-repeat: no-repeat;

    border-radius: 30px;

}



.sub-form {

    display: flex;

    margin-top: var(--tb-val-xs);

    margin-inline: auto;

    padding: 1px;

    padding-left: 30px;

    max-width: 650px;

    background-color: var(--bg-main);

    border: 1px solid transparent;

    border-radius: 15px;

    align-items: center;

    gap: 20px;

}



.sub-form.error {

    border-color: var(--acc-error);

}



.sub-input,

.tnp-email {

    width: 100%;

    font-size: 18px;

    font-weight: 400;

    line-height: 1.3em;

    color: var(--clr-black);

    background-color: transparent;

    border: 0;

}



.sub-input::-moz-placeholder,

.tnp-email::-moz-placeholder {

    color: var(--clr-l-gray);

}



.sub-input::placeholder,

.tnp-email::placeholder {

    color: var(--clr-l-gray);

}



.tnp-field-email {

    width: 100%;

}



.tnp-field input[type="submit"] {

    display: flex;

    padding: 16px 32px;

    width: -moz-fit-content;

    width: fit-content;

    font-size: 18px;

    font-weight: 700;

    line-height: 1.3em;

    background-color: transparent;

    border: 1px solid transparent;

    border-radius: 13px;

    transition: var(--def-transition);

    justify-content: center;

    align-items: center;

    gap: 16px;

    cursor: pointer;

    color: var(--clr-white);

    background-color: var(--acc-green);

}



.tnp-field input[type="submit"]:hover {

    background-color: var(--acc-d-green);

}



@media screen and (max-width: 1600px) {

    .tnp-field input[type="submit"] {

        font-size: 16px;

    }

}

@media screen and (max-width: 1600px) {

    .sub-input,

    .tnp-email {

        font-size: 16px;

    }

}



@media screen and (max-width: 1280px) {

    .tnp-field input[type="submit"] {

        font-size: 14px;

    }

}



@media screen and (max-width: 1024px) {

    .sub-input,

    .tnp-email {

        font-size: 15px;

    }

    .tnp-field input[type="submit"] {

        padding: 13px 24px;

    }

}

@media screen and (max-width: 552px) {

    .tnp-field input[type="submit"] {

        font-size: 0;

        gap: 0;

        padding: 21px 34px;

    }



    .tnp-field-button {

        position: relative;

        display: flex;

        justify-content: center;

        align-items: center;

        background-size: 100% auto;

        background-position: center center;

        background-repeat: no-repeat;

    }



    .tnp-field-button:before {

        position: absolute;

        content: "";

        width: 20px;

        height: 20px;

        z-index: 1;

    }

}



@media screen and (max-width: 1024px) {

    .sub-container {

        padding-block: 90px;

        background-size: cover;

    }



    .sub-form {

        padding-left: 16px;

        max-width: 512px;

    }



    .sub-input,

    .tnp-email {

        font-size: 15px;

    }

}



@media screen and (max-width: 552px) {

    .sub-container {

        margin-inline: calc(var(--p-inline) * -1);

        padding-block: 80px;

    }

    .sub-btn {

        padding: 11px 24px;

        font-size: 0;

        gap: 0;

    }

    .sub-btn:before {

        content: "";

        display: block;

        width: 20px;

        height: 20px;

        background-size: 100% auto;

        background-position: center center;

        background-repeat: no-repeat;

    }

}