@media only screen and (max-width: 430px) {
	/*defaults*/
	body{
		font-size: 16px;
	}
	#myBtn {
		bottom: 15px;
		right: 25px;
	}
	#myBtn > img{
		width: 40px;
		height: 40px;
	}
	.main-heading{
		font-size: 24px;
	}
	.sub-heading{
		font-size: 20px;
	}
	.default-font{
		font-size: 16px;
	}
	
	/*index page*/
	.flex-with-2-box{
		width: 80%;
	}
	.branding{
		width: 80%;
	}
	.dropdown{
		width: 90%;
		padding: 10px;
		margin: 50px 8% 0px 2%;
	}
	.dropdown-container{
		width: 90%;
		height: 70px;
		padding: 10px;
		margin: 2px 8% 0px 2%;
	}
	
	/*nav bar*/
	.current{
		background-color: darkgreen;
	}
	.topnav a:hover {
		background-color: darkgreen;
		color: white;
	}
	.topnav a:not(:first-child) {display: none;}
	.topnav a.icon {
		float: right;
		display: block;
	}
	.topnav.responsive {position: relative;}
	.topnav.responsive .icon {
		position: absolute;
		right: 0;
		top: 0;
	}
	.topnav.responsive a {
		float: none;
		display: block;
		text-align: left;
	}
	.grass{ 
		height: 50px;
		background-size: 100% 70px;
	}
	
	/*form*/
	.form-heading{
		margin-top: 30px;
	}
	.counselling-form{
		width: 85%;
		padding: 30px;
		position: relative;
		bottom: -330px;
		right: 3%;
	}
	.counselling-form > form{
		position: relative;
	}
	input{
		width: 91%;
	}
	.button{
		width: 55%;
		margin: 10px 22.5% 0px 22.5%;
	}
	.flex-with-2-box > .form-image{
		width: 90%;
		position: relative;
		right: 3%;
		top: -260px;
	}
	
	/*about*/
	.about{
		background-image: url("../english/image/welcome_bg_potrait.jpg");
		background-position-x: center top;
		background-size: 120%;
		height: 932px;
		margin-top: 30%;
		clip-path: inset(0px 0px 45px 0px);
	}
	.flex-with-2-box > .welcome_image{
		width: 82%;
		position: relative;
		top: -6px;
		left: 7px;
	}
	.flex-with-3-box{
		width: 70%;
	}
	.content {
		width: 100%;
		position: relative;
		top: 85px;
		left: 0px;
	}
	.content_2 {
		width: 90%;
		position: relative;
		top: 75px;
		left: 15px;
	}
	.div_top_margin{
		margin-top: 5%;
	}
	.div_top_margin_2{
		margin-top: 15%;
	}
	.group_content{ 
		margin-top: 3%;
	}
	.group_1{
		width: 78%;
		margin: 20px 11%;
	}
	.group_2{
		width: 78%;
		margin: 20px 11%;
	}
	.group_3{
		width: 78%;
		margin: 20px 11%;
	}
	
	/*why choose*/
	.why_bg{
		background-image: url("../english/image/why_bg_potrait.png");
		background-size: 98% 100%;
		height: 1100px;
		margin-top: 23%;
	}
	.why_bg > p{
		position: relative;
		top: -3%;
		left: 0;
	}
	.why_contain{
		background-image: url("../english/image/why_choose_potrait.png");
		background-size: 75%;
		height: 800px;
		width: 90%;
		top: 10%;
		left: 8%;
	}
	
	/*Testimonials*/
	.swiper {
		width: 95%;
		height: 350px;
		margin-top: 20px;
	}
	.swiper-slide img {
		width: 300px;
		height: 300px;
		margin-left: 55px;
	}
	
}


@media only screen and (max-width: 394px) {
	/*defaults*/
	body{
		font-size: 16px;
	}
	#myBtn {
		bottom: 15px;
		right: 25px;
	}
	#myBtn > img{
		width: 40px;
		height: 40px;
	}
	.main-heading{
		font-size: 24px;
	}
	.sub-heading{
		font-size: 20px;
	}
	.default-font{
		font-size: 16px;
	}
	
	/*index page*/
	.flex-with-2-box{
		width: 80%;
	}
	.branding{
		width: 80%;
	}
	.dropdown{
		width: 90%;
		padding: 10px;
		margin: 50px 8% 0px 2%;
	}
	.dropdown-container{
		width: 90%;
		height: 70px;
		padding: 10px;
		margin: 2px 8% 0px 2%;
	}
	
	/*nav bar*/
	.current{
		background-color: darkgreen;
	}
	.topnav a:hover {
		background-color: darkgreen;
		color: white;
	}
	.topnav a:not(:first-child) {display: none;}
	.topnav a.icon {
		float: right;
		display: block;
	}
	.topnav.responsive {position: relative;}
	.topnav.responsive .icon {
		position: absolute;
		right: 0;
		top: 0;
	}
	.topnav.responsive a {
		float: none;
		display: block;
		text-align: left;
	}
	.grass{ 
		height: 50px;
		background-size: 100% 70px;
	}
	
	/*form*/
	.form-heading{
		margin-top: 30px;
	}
	.counselling-form{
		width: 85%;
		padding: 30px;
		position: relative;
		bottom: -290px;
		right: 3%;
	}
	.counselling-form > form{
		position: relative;
	}
	input{
		width: 91%;
	}
	.button{
		width: 60%;
		margin: 10px 20% 0px 20%;
	}
	.flex-with-2-box > .form-image{
		width: 90%;
		position: relative;
		right: 3%;
		top: -260px;
	}
	
	/*about*/
	.about{
		background-image: url("../english/image/welcome_bg_potrait.jpg");
		background-position-x: center top;
		background-size: 120%;
		height: 950px;
		margin-top: 15%;
	}
	.flex-with-2-box > .welcome_image{
		width: 82%;
		position: relative;
		top: 23px;
		left: 6px;
	}
	.flex-with-3-box{
		width: 70%;
	}
	.content {
		width: 100%;
		position: relative;
		top: 85px;
		left: 0px;
	}
	.content_2 {
		width: 100%;
		position: relative;
		top: 75px;
		left: 0px;
	}
	.div_top_margin{
		margin-top: 5%;
	}
	.div_top_margin_2{
		margin-top: 15%;
	}
	.group_content{ 
		margin-top: 3%;
	}
	.group_1{
		width: 80%;
		margin: 20px 10%;
	}
	.group_2{
		width: 80%;
		margin: 20px 10%;
	}
	.group_3{
		width: 80%;
		margin: 20px 10%;
	}
	
	/*why choose*/
	.why_bg{
		background-image: url("../english/image/why_bg_potrait.png");
		background-size: 98% 100%;
		height: 1025px;
		margin-top: 23%;
	}
	.why_bg > p{
		position: relative;
		top: -3%;
		left: 0;
	}
	.why_contain{
		background-image: url("../english/image/why_choose_potrait.png");
		background-size: 75%;
		height: 750px;
		width: 90%;
		top: 10%;
		left: 8%;
	}
	
	/*Testimonials*/
	.swiper {
		width: 95%;
		height: 310px;
		margin-top: 20px;
	}
	.swiper-slide img {
		width: 265px;
		height: 265px;
		margin-left: 55px;
	}
}


@media only screen and (max-width: 361px) {
	/*defaults*/
	body{
		font-size: 16px;
	}
	#myBtn {
		bottom: 15px;
		right: 25px;
	}
	#myBtn > img{
		width: 40px;
		height: 40px;
	}
	.main-heading{
		font-size: 24px;
	}
	.sub-heading{
		font-size: 20px;
	}
	.default-font{
		font-size: 16px;
	}
	
	/*index page*/
	.flex-with-2-box{
		width: 80%;
	}
	.branding{
		width: 80%;
	}
	.dropdown{
		width: 90%;
		padding: 10px;
		margin: 50px 8% 0px 2%;
	}
	.dropdown-container{
		width: 90%;
		height: 70px;
		padding: 10px;
		margin: 2px 8% 0px 2%;
	}
	
	/*nav bar*/
	.current{
		background-color: darkgreen;
	}
	.topnav a:hover {
		background-color: darkgreen;
		color: white;
	}
	.topnav a:not(:first-child) {display: none;}
	.topnav a.icon {
		float: right;
		display: block;
	}
	.topnav.responsive {position: relative;}
	.topnav.responsive .icon {
		position: absolute;
		right: 0;
		top: 0;
	}
	.topnav.responsive a {
		float: none;
		display: block;
		text-align: left;
	}
	.grass{ 
		height: 50px;
		background-size: 100% 70px;
	}
	
	/*form*/
	.form-heading{
		margin-top: 30px;
	}
	.counselling-form{
		width: 85%;
		padding: 30px;
		position: relative;
		bottom: -290px;
		right: 3%;
	}
	.counselling-form > form{
		position: relative;
	}
	input{
		width: 91%;
	}
	.button{
		width: 60%;
		margin: 10px 20% 0px 20%;
		padding: 5px 0px 2px 0px;
	}
	.flex-with-2-box > .form-image{
		width: 90%;
		position: relative;
		right: 3%;
		top: -260px;
	}
	
	/*about*/
	.about{
		background-image: url("../english/image/welcome_bg_potrait_2.jpg");
		background-position-x: center top;
		background-size: 120%;
		height: 950px;
		margin-top: 25%;
	}
	.flex-with-2-box > .welcome_image{
		width: 82%;
		position: relative;
		top: 25px;
		left: 5px;
	}
	.flex-with-3-box{
		width: 70%;
	}
	.content {
		width: 100%;
		position: relative;
		top: 85px;
		left: 0px;
	}
	.content_2 {
		width: 100%;
		position: relative;
		top: 75px;
		left: 0px;
	}
	.div_top_margin{
		margin-top: 5%;
	}
	.div_top_margin_2{
		margin-top: 15%;
	}
	.group_content{ 
		margin-top: 3%;
	}
	.group_1{
		width: 90%;
		margin: 20px 5%;
	}
	.group_2{
		width: 90%;
		margin: 20px 5%;
	}
	.group_3{
		width: 90%;
		margin: 20px 5%;
	}
	
	/*why choose*/
	.why_bg{
		background-image: url("../english/image/why_bg_potrait.png");
		background-size: 98% 100%;
		height: 950px;
		margin-top: 23%;
	}
	.why_bg > p{
		position: relative;
		top: -4%;
		left: 0;
	}
	.why_contain{
		background-image: url("../english/image/why_choose_potrait.png");
		background-size: 75%;
		height: 690px;
		width: 90%;
		top: 10%;
		left: 8%;
	}
	/*Testimonials*/
	.swiper {
		width: 95%;
		height: 280px;
		margin-top: 20px;
	}
	.swiper-slide img {
		width: 235px;
		height: 235px;
		margin-left: 55px;
	}
}


@media only screen and (max-width: 321px) {
	/*defaults*/
	body{
		font-size: 16px;
	}
	#myBtn {
		bottom: 15px;
		right: 25px;
	}
	#myBtn > img{
		width: 40px;
		height: 40px;
	}
	.main-heading{
		font-size: 24px;
	}
	.sub-heading{
		font-size: 20px;
	}
	.default-font{
		font-size: 16px;
	}
	
	/*index page*/
	.flex-with-2-box{
		width: 80%;
	}
	.branding{
		width: 80%;
	}
	.dropdown{
		width: 90%;
		padding: 10px;
		margin: 50px 8% 0px 2%;
	}
	.dropdown-container{
		width: 90%;
		height: 70px;
		padding: 10px;
		margin: 2px 8% 0px 2%;
	}
	
	/*nav bar*/
	.current{
		background-color: darkgreen;
	}
	.topnav a:hover {
		background-color: darkgreen;
		color: white;
	}
	.topnav a:not(:first-child) {display: none;}
	.topnav a.icon {
		float: right;
		display: block;
	}
	.topnav.responsive {position: relative;}
	.topnav.responsive .icon {
		position: absolute;
		right: 0;
		top: 0;
	}
	.topnav.responsive a {
		float: none;
		display: block;
		text-align: left;
	}
	.grass{ 
		height: 50px;
		background-size: 100% 70px;
	}
	
	/*form*/
	.form-heading{
		margin-top: 30px;
	}
	.counselling-form{
		width: 85%;
		padding: 30px;
		position: relative;
		bottom: -250px;
		right: 3%;
	}
	.counselling-form > form{
		position: relative;
	}
	input{
		width: 91%;
	}
	.button{
		width: 60%;
		margin: 10px 20% 0px 20%;
		padding: 5px 0px 2px 0px;
	}
	.flex-with-2-box > .form-image{
		width: 90%;
		position: relative;
		right: 3%;
		top: -260px;
	}
	
	/*about*/
	.about{
		background-image: url("../english/image/welcome_bg_potrait_3.jpg");
		background-position-x: center top;
		background-size: 120%;
		height: 950px;
		margin-top: 25%;
	}
	.flex-with-2-box > .welcome_image{
		width: 82%;
		position: relative;
		top: 11px;
		left: 5px;
	}
	.flex-with-3-box{
		width: 70%;
	}
	.content {
		width: 100%;
		position: relative;
		top: 65px;
		left: 0px;
	}
	.content_2 {
		width: 100%;
		position: relative;
		top: 55px;
		left: 0px;
	}
	.div_top_margin{
		margin-top: 3%;
	}
	.div_top_margin_2{
		margin-top: 15%;
	}
	.group_content{ 
		margin-top: 3%;
	}
	.group_1{
		width: 100%;
		margin: 20px 0px;
	}
	.group_2{
		width: 100%;
		margin: 20px 0px;
	}
	.group_3{
		width: 100%;
		margin: 20px 0px;
	}
	
	/*why choose*/
	.why_bg{
		background-image: url("../english/image/why_bg_potrait.png");
		background-size: 98% 100%;
		height: 840px;
		margin-top: 23%;
	}
	.why_bg > p{
		position: relative;
		top: -5%;
		left: 0;
	}
	.why_contain{
		background-image: url("../english/image/why_choose_potrait.png");
		background-size: 75%;
		height: 620px;
		width: 90%;
		top: 9%;
		left: 8%;
	}
	/*Testimonials*/
	.swiper {
		width: 95%;
		height: 250px;
		margin-top: 20px;
	}
	.swiper-slide img {
		width: 205px;
		height: 205px;
		margin-left: 50px;
	}
}