@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@200;300;400;600;700&display=swap');

 

*{padding: 0px; margin: 0px; box-sizing: border-box;}
body{background-color: #f4edff; font-family: 'Nunito Sans', sans-serif; font-size:16px; font-weight: 400;
  color: #666666;  line-height: 1.5;}
a{color: #321461;text-decoration:none;outline: none;}
a, .btn, button {  -webkit-transition: all .3s;   -moz-transition: all .3s;    -o-transition: all .3s;
    transition: all .3s;}
.header { position: fixed; text-align: center; width: 100%; padding: 15px 0px; } 
.header img { max-width: 139px; } 
.newsletters { display: flex; width: 100%; height: 100vh; align-items: center; justify-content: center; } 
.newsletters-outer {width: 700px; max-width: 90%; text-align: center; } 
.newsletters-outer h1 { font-size: 50px; color: #321461;    line-height: 1.2; margin-bottom:15px;} 
.newsletters-outer p { font-size: 20px; margin-bottom: 15px; } 
.newsletters-field {display: flex;justify-content: center;align-items: center;margin-top: 45px;position: relative;padding-bottom: 31px;} 
button {padding: 10px 24px;font-weight: 600; border-radius: 0px;background: #321461;border: 0px;color: #fff;
   cursor: pointer;outline: none; font-size: 16px;} 
button:hover{opacity: 0.8;}
.form-control {padding: 11px 10px;width: 100%;background: #fff; color: #666666;font-size: 16px;border: 0px;outline: none;line-height: 1.7;} 
.newsletters-field .form-control, 
.newsletters-field button {height: 50px;}
.newsletters-field button {
  display: flex;
  align-items: center;
  grid-gap: 5px;
}

#success {
  position: absolute;
  bottom: 0px;
  font-size: 14px;
  left: 10px;
  margin: 0px;
  color: #04b847;
}

.hide {
  display: none;
}

.loader {
  max-width: 15px;
  display: none;
}
.loading .loader {
  display: inline-block;
}

@media (max-width:575px){
.newsletters-outer h1 { font-size: 30px;}
.newsletters-outer p { font-size: 16px;}
.newsletters-field { margin-top: 35px;} 

}

@media (max-width:360px){
button {padding: 10px 10px;}

}