body{
	margin:0px;
	padding:0px;
	font-family: SourceSansPro,Helvetica Neue,Helvetica,Arial;
	font-size: 14px;
	line-height: 20px;
}
.container{
	max-width: 800px;
	margin:0 auto;	
}
.banner img{
	max-width: 100%;	
	vertical-align: bottom;
}
.banner_bottom_text{
	background-image: linear-gradient(#f5cdcd, #ffdbd6);
	margin-top:-3px;
}
.banner_bottom_text p{	
	text-align: center;
	padding:4%;
	font-size:20px;
	line-height: 30px;
	font-weight: 700;
	color: #dc3f6d;
	margin:0px;	
}
.curve_top{
	margin-top: -3px;
}
.curve_top img{
	max-width: 100%;
	vertical-align: bottom;
}
.benefits_text p{
	font-size: 23px;
	line-height: 30px;
	text-align: center;	
	font-weight: bold;
	padding:0 4%;
}
.icon-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding:10px 0px;
}
.icon-container>div {
    width: 200px;
    margin: 10px;
    text-align: center;
    line-height: 30px;
}
.icon-container>div>img {
    max-width: 60%;
}
.text-icon p {
    text-align: center;
    color: #414042;
    font-size: 18px;
    font-weight: 500;
    line-height: 23px;
    padding-bottom: 10px;
    margin:0px;
}
.text-icon>p>span>img {
    max-width: 44%;
    vertical-align: text-top;
}
.grofers_discount img{
	max-width: 100%;
	vertical-align: bottom;
}
.credit_card_fc p{
	font-size: 24px;
    text-align: center;
    font-weight: 700;
    line-height: 30px;
    padding: 5px 4%;
}

.icon-container-bottom {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding:10px 0px;
}
.icon-container-bottom>div {
    width: 200px;
    margin: 10px;
    text-align: center;
    line-height: 30px;
}
.icon-container-bottom>div>img {
    max-width: 60%;
}
.text-icon-bottom p {
    text-align: center;
    color: #414042;
    font-size: 17px;
    font-weight: 500;
    line-height: 23px;   
    margin:0px;
}
.curve_footer img{
	max-width: 100%;
	vertical-align: bottom;
}
.getNow a {
    width: 100%;
    height: auto;
    display: inline-block;
	background-color: #9e9e9e;
    line-height: 30px;
    text-align: center;
    text-decoration: none;
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    padding: 5px 0px;
    position: fixed;
    bottom: 0px;
	left: 0px;
	pointer-events: none;
}

/*css for employment-sec*/

.employment-sec{
	padding: 20px 80px;
}


.reveal-if-active {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  font-size: 16px;
  transform: scale(0.8);
  transition: 0.5s;
}
.reveal-if-active label {
  display: block;
  margin: 10px 0 10px 0;
}
.reveal-if-active input[type=number] {
  width: 100%;
  padding: 8px 5px;
    font-size: 18px;
}

.error-div{
	display: none;
}
.error-div p{
	margin-top: 0;
	color: #ff0000;
}

input[type=radio]:checked ~ .reveal-if-active, input[type=checkbox]:checked ~ .reveal-if-active {
  opacity: 1;
  max-height: 100px;
  padding: 10px 40px;
  transform: scale(1);
  overflow: visible;
}

form {
  margin: 20px auto;
}
form > div {
  margin: 0 0 20px 0;
}
form > div label {
  font-weight: 400;
  font-size: 20px;
}
form > div > div {
  padding: 5px;
}
form > h4 {
  color: #000;
  font-size: 24px;
  margin: 0 0 10px 0;
}



/******** When the width is below 320px *********/
	@media screen and (max-width: 320px) {
		.banner_bottom_text p{	
			text-align: center;
			padding:4%;
			font-size:10px;
			line-height: 18px;
			font-weight: 700;
			color: #dc3f6d;
			margin:0px;	
		}

		.benefits_text p{
			font-size: 12px;
			line-height: 22px;
			text-align: center;	
			font-weight: bold;
			padding:0 4%;
		}
		.icon-container {
		    display: flex;
		    justify-content: center;
		    flex-wrap: wrap;
		    padding:10px 0px;
		}
		.icon-container>div {
		    width: 85px;		    
		}
		.icon-container>div>img {
		    max-width: 80%;
		}
		.text-icon p {
		    text-align: center;
		    color: #414042;
		    font-size: 11px;
		    font-weight: 500;
		    line-height: 16px;		    
		}
		.text-icon>p>span>img {
		    max-width: 60%;
		    vertical-align: text-top;
		}
		.grofers_discount img{
			max-width: 100%;
			vertical-align: bottom;
		}
		.credit_card_fc p{
			font-size: 11px;
		    text-align: center;
		    font-weight: 700;
		    line-height: 16px;
		    padding: 10px 4% 0px 4%;
		    margin-bottom: 0px;
		}

		.icon-container-bottom {
		    display: flex;
		    justify-content: center;
		    flex-wrap: wrap;
		    padding:10px 0px;
		}
		.icon-container-bottom>div {
		    width: 85px;
		    margin: 10px;
		    text-align: center;
		    line-height: 30px;
		}
		.icon-container-bottom>div>img {
		    max-width: 75%;
		}
		.text-icon-bottom p {
		    text-align: center;
		    color: #414042;
		    font-size: 11px;
		    font-weight: 500;
		    line-height: 16px;   
		    margin:0px;
		}
		.curve_footer img{
			max-width: 100%;
			vertical-align: bottom;
		}
		.getNow a {
		    width: 100%;
		    height: auto;
		    display: inline-block;
		    background-color: #9e9e9e;
		    line-height: 17px;
		    text-align: center;
		    text-decoration: none;
		    font-size: 12px;
		    font-weight: 600;
		    color: #fff;
		    padding: 5px 0px;
		    position: fixed;
		    bottom: 0px;
		    left: 0px;
		}
		.employment-sec {
   			 padding: 20px 20px;
		}

		form > h4 {
    	font-size: 14px;
    	}


    	form > div label {
    	font-size: 13px;
		}

		.reveal-if-active input[type=number] {
   			 font-size: 13px;
		
		}

		.reveal-if-active input[type=number]::placeholder{
			font-size: 13px;
		}
	  
	}

/******** When the width is between 321px and 360px *********/
	@media screen and (max-width: 360px) and (min-width: 321px) {
	  
	  .banner_bottom_text p{	
			text-align: center;
			padding:4%;
			font-size:12px;
			line-height: 20px;
			font-weight: 700;
			color: #dc3f6d;
			margin:0px;	
		}
		.benefits_text p{
			font-size: 13px;
			line-height: 20px;
			text-align: center;	
			font-weight: bold;
			padding:0 4%;
			margin:0px;
		}
		.icon-container {
		    display: flex;
		    justify-content: center;
		    flex-wrap: wrap;
		    padding:10px 0px;
		}
		.icon-container>div {
		    width: 85px;		    
		}
		.icon-container>div>img {
		    max-width: 80%;
		}
		.text-icon p {
		    text-align: center;
		    color: #414042;
		    font-size: 11px;
		    font-weight: 500;
		    line-height: 16px;		    
		}
		.text-icon>p>span>img {
		    max-width: 60%;
		    vertical-align: text-top;
		}
		.grofers_discount img{
			max-width: 100%;
			vertical-align: bottom;
		}
		.credit_card_fc p{
			font-size: 12px;
		    text-align: center;
		    font-weight: 700;
		    line-height: 20px;
		    padding: 10px 4% 0px 4%;
    		margin-bottom: 0px;
		}

		.icon-container-bottom {
		    display: flex;
		    justify-content: center;
		    flex-wrap: wrap;
		    padding:10px 0px;
		}
		.icon-container-bottom>div {
		    width: 85px;
		    margin: 10px;
		    text-align: center;
		    line-height: 30px;
		}
		.icon-container-bottom>div>img {
		    max-width: 75%;
		}
		.text-icon-bottom p {
		    text-align: center;
		    color: #414042;
		    font-size: 11px;
		    font-weight: 500;
		    line-height: 16px;   
		    margin:0px;
		}
		.curve_footer img{
			max-width: 100%;
			vertical-align: bottom;
		}
		.getNow a {
		    width: 100%;
		    height: auto;
		    display: inline-block;
		    background-color: #9e9e9e;
		    line-height: 20px;
		    text-align: center;
		    text-decoration: none;
		    font-size: 14px;
		    font-weight: 600;
		    color: #fff;
		    padding: 5px 0px;
		    position: fixed;
		    bottom: 0px;
		    left: 0px;
		}

		.employment-sec {
   			 padding: 20px 35px;
		}

		form > h4 {
    	font-size: 16px;
    	}


    	form > div label {
    	font-size: 14px;
		}

		.reveal-if-active input[type=number] {
   			 font-size: 14px;
		
		}

		.reveal-if-active input[type=number]::placeholder{
			font-size: 14px;
		}
	}

	/******** When the width is between 361px and 375px *********/
	@media screen and (max-width: 375px) and (min-width: 361px) {
	  
	  .banner_bottom_text p{	
			text-align: center;
			padding:4%;
			font-size:14px;
			line-height: 20px;
			font-weight: 700;
			color: #dc3f6d;
			margin:0px;	
		}
		.benefits_text p{
			font-size: 16px;
			line-height: 22px;
			text-align: center;	
			font-weight: bold;
			padding:0 4%;
			margin:0px;
		}
		.icon-container {
		    display: flex;
		    justify-content: center;
		    flex-wrap: wrap;
		    padding:10px 0px;
		}
		.icon-container>div {
		    width: 95px;		    
		}
		.icon-container>div>img {
		    max-width: 80%;
		}
		.text-icon p {
		    text-align: center;
		    color: #414042;
		    font-size: 12px;
		    font-weight: 500;
		    line-height: 16px;		    
		}
		.text-icon>p>span>img {
		    max-width: 60%;
		    vertical-align: text-top;
		}
		.grofers_discount img{
			max-width: 100%;
			vertical-align: bottom;
		}
		.credit_card_fc p{
			font-size: 13px;
		    text-align: center;
		    font-weight: 700;
		    line-height: 20px;
		    padding: 10px 4% 0px 4%;
    		margin-bottom: 0px;
		}

		.icon-container-bottom {
		    display: flex;
		    justify-content: center;
		    flex-wrap: wrap;
		    padding:10px 0px;
		}
		.icon-container-bottom>div {
		    width: 95px;
		    margin: 10px;
		    text-align: center;		    
		}
		.icon-container-bottom>div>img {
		    max-width: 75%;
		}
		.text-icon-bottom p {
		    text-align: center;
		    color: #414042;
		    font-size: 12px;
		    font-weight: 500;
		    line-height: 16px;   
		    margin:0px;
		}
		.curve_footer img{
			max-width: 100%;
			vertical-align: bottom;
		}
		.getNow a {
		    width: 100%;
		    height: auto;
		    display: inline-block;
		    background-color: #9e9e9e;
		    line-height: 22px;
		    text-align: center;
		    text-decoration: none;
		    font-size: 15px;
		    font-weight: 600;
		    color: #fff;
		    padding: 5px 0px;
		    position: fixed;
		    bottom: 0px;
		    left: 0px;
		}

		.employment-sec {
   			 padding: 20px 35px;
		}

		form > h4 {
    	font-size: 16px;
    	}


    	form > div label {
    	font-size: 14px;
		}

		.reveal-if-active input[type=number] {
   			 font-size: 14px;
		
		}

		.reveal-if-active input[type=number]::placeholder{
			font-size: 14px;
		}

	}	

	/******** When the width is between 376px and 420px *********/
	@media screen and (max-width: 420px) and (min-width: 376px) {
	  
	  .banner_bottom_text p{	
			text-align: center;
			padding:4%;
			font-size:14px;
			line-height: 20px;
			font-weight: 700;
			color: #dc3f6d;
			margin:0px;	
		}
		.benefits_text p{
			font-size: 16px;
			line-height: 22px;
			text-align: center;	
			font-weight: bold;
			padding:0 4%;
			margin:0px;
		}
		.icon-container {
		    display: flex;
		    justify-content: center;
		    flex-wrap: wrap;
		    padding:10px 0px;
		}
		.icon-container>div {
		    width: 105px;		    
		}
		.icon-container>div>img {
		    max-width: 80%;
		}
		.text-icon p {
		    text-align: center;
		    color: #414042;
		    font-size: 13px;
		    font-weight: 500;
		    line-height: 16px;		    
		}
		.text-icon>p>span>img {
		    max-width: 60%;
		    vertical-align: text-top;
		}
		.grofers_discount img{
			max-width: 100%;
			vertical-align: bottom;
		}
		.credit_card_fc p{
			font-size: 15px;
		    text-align: center;
		    font-weight: 700;
		    line-height: 20px;
		    padding: 10px 4% 0px 4%;
    		margin-bottom: 0px;
		}

		.icon-container-bottom {
		    display: flex;
		    justify-content: center;
		    flex-wrap: wrap;
		    padding:10px 0px;
		}
		.icon-container-bottom>div {
		    width: 105px;
		    margin: 10px;
		    text-align: center;		    
		}
		.icon-container-bottom>div>img {
		    max-width: 75%;
		}
		.text-icon-bottom p {
		    text-align: center;
		    color: #414042;
		    font-size: 12px;
		    font-weight: 500;
		    line-height: 16px;   
		    margin:0px;
		}
		.curve_footer img{
			max-width: 100%;
			vertical-align: bottom;
		}
		.getNow a {
		    width: 100%;
		    height: auto;
		    display: inline-block;
		    background-color: #9e9e9e;
		    line-height: 26px;
		    text-align: center;
		    text-decoration: none;
		    font-size: 16px;
		    font-weight: 600;
		    color: #fff;
		    padding: 5px 0px;
		    position: fixed;
		    bottom: 0px;
		    left: 0px;
		}

		.employment-sec {
   			 padding: 20px 35px;
		}

		form > h4 {
    	font-size: 16px;
    	}


    	form > div label {
    	font-size: 14px;
		}

		.reveal-if-active input[type=number] {
   			 font-size: 14px;
		
		}

		.reveal-if-active input[type=number]::placeholder{
			font-size: 14px;
		}
	}	

/******** When the width is between 421px and 480px *********/
	@media screen and (max-width: 480px) and (min-width: 421px) {
	  
	  .banner_bottom_text p{	
			text-align: center;
			padding:4%;
			font-size:14px;
			line-height: 20px;
			font-weight: 700;
			color: #dc3f6d;
			margin:0px;	
		}
		.benefits_text p{
			font-size: 18px;
			line-height: 25px;
			text-align: center;	
			font-weight: bold;
			padding:0 4%;
			margin:0px;
		}
		.icon-container {
		    display: flex;
		    justify-content: center;
		    flex-wrap: wrap;
		    padding:10px 0px;
		}
		.icon-container>div {
		    width: 125px;		    
		}
		.icon-container>div>img {
		    max-width: 80%;
		}
		.text-icon p {
		    text-align: center;
		    color: #414042;
		    font-size: 14px;
		    font-weight: 500;
		    line-height: 20px;		    
		}
		.text-icon>p>span>img {
		    max-width: 60%;
		    vertical-align: text-top;
		}
		.grofers_discount img{
			max-width: 100%;
			vertical-align: bottom;
		}
		.credit_card_fc p{
			font-size: 18px;
		    text-align: center;
		    font-weight: 700;
		    line-height: 23px;
		    padding: 10px 4% 0px 4%;
    		margin-bottom: 0px;
		}

		.icon-container-bottom {
		    display: flex;
		    justify-content: center;
		    flex-wrap: wrap;
		    padding:10px 0px;
		}
		.icon-container-bottom>div {
		    width: 122px;
		    margin: 10px;
		    text-align: center;		    
		}
		.icon-container-bottom>div>img {
		    max-width: 75%;
		}
		.text-icon-bottom p {
		    text-align: center;
		    color: #414042;
		    font-size: 14px;
		    font-weight: 500;
		    line-height: 20px;   
		    margin:0px;
		}
		.curve_footer img{
			max-width: 100%;
			vertical-align: bottom;
		}
		.getNow a {
		    width: 100%;
		    height: auto;
		    display: inline-block;
		    background-color: #9e9e9e;
		    line-height: 26px;
		    text-align: center;
		    text-decoration: none;
		    font-size: 16px;
		    font-weight: 600;
		    color: #fff;
		    padding: 5px 0px;
		    position: fixed;
		    bottom: 0px;
		    left: 0px;
		}


		.employment-sec {
   			 padding: 20px 35px;
		}

		form > h4 {
    	font-size: 18px;
    	}


    	form > div label {
    	font-size: 16px;
		}

		.reveal-if-active input[type=number] {
   			 font-size: 16px;
		
		}

		.reveal-if-active input[type=number]::placeholder{
			font-size: 16px;
		}
	}	

/******** When the width is between 481px and 600px *********/
	@media screen and (max-width: 600px) and (min-width: 481px) {
	  
	  .banner_bottom_text p{	
			text-align: center;
			padding:4%;
			font-size:16px;
			line-height: 22px;
			font-weight: 700;
			color: #dc3f6d;
			margin:0px;	
		}
		.benefits_text p{
			font-size: 20px;
			line-height: 25px;
			text-align: center;	
			font-weight: bold;
			padding:0 4%;
			margin:0px;
		}
		.icon-container {
		    display: flex;
		    justify-content: center;
		    flex-wrap: wrap;
		    padding:10px 0px;
		}
		.icon-container>div {
		    width: 150px;		    
		}
		.icon-container>div>img {
		    max-width: 80%;
		}
		.text-icon p {
		    text-align: center;
		    color: #414042;
		    font-size: 14px;
		    font-weight: 500;
		    line-height: 20px;		    
		}
		.text-icon>p>span>img {
		    max-width: 45%;
		    vertical-align: text-top;
		}
		.grofers_discount img{
			max-width: 100%;
			vertical-align: bottom;
		}
		.credit_card_fc p{
			font-size: 19px;
		    text-align: center;
		    font-weight: 700;
		    line-height: 23px;
		    padding: 10px 4% 0px 4%;
    		margin-bottom: 0px;
		}

		.icon-container-bottom {
		    display: flex;
		    justify-content: center;
		    flex-wrap: wrap;
		    padding:10px 0px;
		}
		.icon-container-bottom>div {
		    width: 150px;
		    margin: 10px;
		    text-align: center;		    
		}
		.icon-container-bottom>div>img {
		    max-width: 75%;
		}
		.text-icon-bottom p {
		    text-align: center;
		    color: #414042;
		    font-size: 14px;
		    font-weight: 500;
		    line-height: 20px;   
		    margin:0px;
		}
		.curve_footer img{
			max-width: 100%;
			vertical-align: bottom;
		}
		.getNow a {
		    width: 100%;
		    height: auto;
		    display: inline-block;
		    background-color: #9e9e9e;
		    line-height: 30px;
		    text-align: center;
		    text-decoration: none;
		    font-size: 18px;
		    font-weight: 600;
		    color: #fff;
		    padding: 5px 0px;
		    position: fixed;
		    bottom: 0px;
		    left: 0px;
		}

		.employment-sec {
   			 padding: 20px 35px;
		}

		form > h4 {
    	font-size: 18px;
    	}


    	form > div label {
    	font-size: 16px;
		}

		.reveal-if-active input[type=number] {
   			 font-size: 16px;
		
		}

		.reveal-if-active input[type=number]::placeholder{
			font-size: 16px;
		}

	}