/*==================================================
    TIPA MART
    NEWSLETTER
==================================================*/


/*==================================================
    SECTION
==================================================*/

.newsletter{

    width:100%;

    padding:25px 0 25px;

    background:#F7F7F7;

}


/*==================================================
    MAIN CONTENT
==================================================*/

.newsletter__content{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:50px;

    width:100%;

}


/*==================================================
    LEFT TEXT
==================================================*/

.newsletter__text{

    flex:1;

    min-width:0;

}


.newsletter__title{

    margin:0 0 6px;

    color:#222222;

    font-size:22px;

    font-weight:700;

    line-height:1.2;

}


.newsletter__description{

    margin:0;

    color:#777777;

    font-size:12px;

    line-height:1.4;

}


/*==================================================
    RIGHT AREA
==================================================*/

.newsletter__right{

    flex:0 0 450px;

    display:flex;

    flex-direction:column;

    align-items:stretch;

}


/*==================================================
    FORM
==================================================*/

.newsletter__form{

    display:flex;

    width:100%;

    height:42px;

}


/*==================================================
    INPUT
==================================================*/

.newsletter__input{

    flex:1;

    min-width:0;

    height:42px;

    padding:0 15px;

    border:1px solid #DDDDDD;

    border-right:none;

    border-radius:4px 0 0 4px;

    outline:none;

    background:#FFFFFF;

    color:#222222;

    font-family:inherit;

    font-size:12px;

}


.newsletter__input::placeholder{

    color:#999999;

}


.newsletter__input:focus{

    border-color:#082C6C;

}


/*==================================================
    SEND BUTTON
==================================================*/

.newsletter__button{

    flex:0 0 82px;

    height:42px;

    padding:0;

    border:none;

    border-radius:0 4px 4px 0;

    background:#082C6C;

    color:#FFFFFF;

    font-family:inherit;

    font-size:11px;

    font-weight:700;

    cursor:pointer;

}


.newsletter__button:hover{

    background:#061F4D;

}


/*==================================================
    TERMS
==================================================*/

.newsletter__terms{

    margin:7px 0 0;

    color:#999999;

    font-size:10px;

    line-height:1.4;

}


.newsletter__terms a{

    color:#777777;

    text-decoration:underline;

}


.newsletter__terms a:hover{

    color:#082C6C;

}


/*==================================================
    TABLET
==================================================*/

@media (max-width:992px){

    .newsletter{

        padding:22px 0;

    }


    .newsletter__content{

        gap:30px;

    }


    .newsletter__right{

        flex-basis:380px;

    }


    .newsletter__title{

        font-size:20px;

    }

}


/*==================================================
    MOBILE
==================================================*/

@media (max-width:768px){

    .newsletter{

        padding:22px 0;

    }


    .newsletter__content{

        flex-direction:column;

        align-items:stretch;

        gap:18px;

    }


    .newsletter__text{

        text-align:center;

    }


    .newsletter__right{

        flex:0 0 auto;

        width:100%;

        max-width:500px;

        margin:0 auto;

    }


    .newsletter__title{

        font-size:18px;

    }


    .newsletter__description{

        font-size:11px;

    }

}


/*==================================================
    SMALL MOBILE
==================================================*/

@media (max-width:576px){

    .newsletter{

        padding:20px 0;

    }


    .newsletter__content{

        gap:15px;

    }


    .newsletter__title{

        font-size:16px;

    }


    .newsletter__description{

        font-size:10px;

    }


    .newsletter__form{

        height:38px;

    }


    .newsletter__input{

        height:38px;

        padding:0 12px;

        font-size:11px;

    }


    .newsletter__button{

        flex-basis:70px;

        height:38px;

        font-size:10px;

    }


    .newsletter__terms{

        font-size:9px;

    }

}