/*************************************/
/******** 1200 px = 1200/16 = 75*****/
/*************************************/
@media(max-width:75em){
	  /* 
      default font-size: 16px 
      9px / 16px = 56.25% - to make it 9px 
      Percentage of user browswer fontsize
    */
    html{
        font-size: 56.25%;
    }
	
	.container {
		max-width: 110rem;
	}
	
	h1 {
		font-size: 3rem;
	}
	
	
	.contact-us-section{
    	display: grid;
    	grid-template-columns: 2fr 1fr;     
    }
}
/*************************************/
/******** 950 px = 950/16 = 60*****/
/*************************************/
@media(max-width:60em){	
	h1 {
		 margin-bottom: 2rem;
	}
	
	h2 {
		margin-bottom: 1rem;
	}
	
	.h3_spacing{
	  margin-top: 1rem;	
	}
}

/*************************************/
/******** 750 px = 750/16 = 46*****/
/*************************************/

@media(max-width:46em){
	 html{
        font-size: 50.00%;
    }  
	
	.container {
		max-width: 70rem;
	}
	
	 
	
	h1 {
		font-size: 2.5rem;
	}
	
	h2 {
  		font-size: 1.5rem;
  	}
  	
  	
  	.h2_ul li{
		font-size: 1.2rem;
  	}
  	
  	.register_text {
		font-size: 1.3rem;
	}
	
	.register_btn {
		font-size: 1.3rem;
		padding: 2px 8px;
	}
  	.contact-us-section{
		grid-template-columns: 1fr;     	
	}
	
	.feature_body{
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 15rem 15rem 15rem;
	}		
}


/*************************************/
/******** 450 px = 450/16 = 31*****/
/*************************************/
@media(max-width:31em){
	 html{
        font-size: 45.00%;
    }  
	
	.container {
		max-width: 50rem;
	}
	
	h1 {
		font-size: 2rem;
	}
	
	h2 {
  		font-size: 1.3rem;
  	}
  	
  	.h2_ul li{
		font-size: 1rem;
  	}
  	
  	.register_text {
		font-size: 1.2rem;
	}
	
	.register_btn {
		font-size: 1rem;
		padding: 2px 5px;
	}
  	
  	.contact-us-form{
		grid-template-columns: auto 1fr;
	}  	
}