:root{
    --Tomato: hsl(4, 100%, 67%);
    --Dark-Slate-Grey: hsl(234, 29%, 20%);
    --Charcoal-Grey: hsl(235, 18%, 26%);
    --Grey: hsl(231, 7%, 60%);
    --White: hsl(0, 0%, 100%);
}
*{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body{
    font-family: sans-serif;
    background-color: var(--Dark-Slate-Grey);
    transition: .4s;
}
@media (max-width: 767px){
    body{
        background-color: var(--White);
    }
    
}
.container{
    padding: 20px;
    width: 60%;
    height: 80%;
    background-color: var(--White);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50% , -50%);
    border-radius: 20px;
}
@media (max-width: 767px){
    .container{
        padding: 0 20px;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        transform: translate(0 , 0);
        border-radius: 0;
    }
    
}
.newsletter{
    /* display: none; */
}
.newsletter .container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 50px;
}
@media (max-width: 767px){
    .newsletter .container{
        flex-direction: column;
        gap: 0;
    }
    
}
.newsletter .text-side{
    flex-basis: 45%;
    margin-left: 30px;
}
@media (max-width: 767px){
    .newsletter .text-side{
        order: 2;
        flex-basis: 100%;
        margin-left: 0;
    }
    
}
.newsletter .text-side h1{
    margin-bottom: 30px;
    color: var(--Charcoal-Grey);
}
.newsletter .text-side p{
    color: var(--Charcoal-Grey);
    margin-bottom: 20px;
}
.newsletter .text-side .true{
    margin-bottom: 30px;
}
.newsletter .text-side .true div{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    color: var(--Charcoal-Grey);
}
@media (max-width: 767px){
    .newsletter .text-side .true div{
        align-items: flex-start;
    }
    
}
.newsletter .text-side .true div img{

}
.newsletter .text-side .true div span{

}

.newsletter .text-side form{
    
}
.newsletter .text-side form .email{
    position: relative;
}
.newsletter .text-side form .email span{
    position: absolute;
    right: 0;
    font-size: 12px;
    color: var(--Tomato);
    display: none;
}
.newsletter .text-side form .email label{
    display: block;
    margin-bottom: 5px;
    font-size: 12px;
    color: var(--Dark-Slate-Grey);
}
.newsletter .text-side form .email input{
    width: 100%;
    height: 50px;
    padding-left: 15px;
    margin-bottom: 20px;
    border-radius: 5px;
    border: 1px solid var(--Grey) ;
    cursor: pointer;
}
.newsletter .text-side form .email input:focus{
    outline: none;
}
.newsletter .text-side form input[type = 'submit']{
    width: 100%;
    height: 50px;
    background-color: var(--Dark-Slate-Grey);
    color: var(--White);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: .3s;
}
@media (max-width: 767px){
    .newsletter .text-side form input[type = 'submit']{
        margin-bottom: 30px;
    }
    
}
.newsletter .text-side form input[type = 'submit']:hover{
    background-color: var(--Tomato);
    box-shadow: 0px 9px 20px 0px var(--Tomato);
}
.newsletter .image-desktop{
    width: 42%;
}
@media (max-width: 767px){
    .newsletter .image-desktop{
        display: none;
    }

}
.newsletter .image-mobile{
    display: none;
}
@media (max-width: 767px){
    .newsletter .image-mobile{
        display: block;
        margin-bottom: 20px;
    }
    
}


/* ............................................................................................... */

.success-message{
    padding: 40px;
    width: 26%;
    height: 55%;
    background-color: var(--White);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50% , -50%);
    border-radius: 20px;
    box-shadow: 0px 9px 20px 0px var(--Dark-Slate-Grey);
    display: none;
}
@media (max-width: 767px){
    .success-message{
        padding: 30px;
        width: 100%;
        height: 100%;
        border-radius: 0;
        /* display: none; */
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
}
.success-message img{
    width: 40px;
    margin-bottom: 20px;
}
.success-message h1{
    color: var(--Dark-Slate-Grey);
    margin-bottom: 20px;
}
.success-message p{
    font-size: 12px;
    color: var(--Charcoal-Grey);
    margin-bottom: 20px;
}
.success-message p span{
    font-weight: bold;
    color: var(--Dark-Slate-Grey);
}
.success-message button{
    width: 100%;
    height: 40px;
    background-color: var(--Dark-Slate-Grey);
    color: var(--White);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: .3s;
}
@media (max-width: 767px){
    .success-message button{
        position: relative;
        top: 30%;
    }
    
}
.success-message button:hover{
    background-color: var(--Tomato);
    box-shadow: 0px 9px 20px 0px var(--Tomato);
}