/*--- Extra large devices (large desktops, 1400px and up) -----*/

@media (min-width: 1400px) { 

	.container{
		max-width: 1270px;
	}

}





@media (max-width: 1399px) {
	html{
		font-size: 55%;
	}
}


@media (max-width: 1199px) {
	html{
		font-size: 48%;
	}
}



/* ------ Medium devices (tablets, 991px and down) -----*/

@media (max-width: 991px) {

	html{
		font-size: 55%;
	}

	.title{
		font-size: 4.5rem;
	}

	.hero_area h2{
		font-size: 7.5rem;
	}

	.hero_area p{
		font-size: 2.5rem;
	}

	.leave_certificate_area .icon_box{
		margin-top: 4rem;
	}

	.service_box{
		margin-top: 4rem;
	}

	.leave_certificate_area .row {
		--bs-gutter-x: 4rem;
	}

	.services_area .row {
		--bs-gutter-x: 4rem;
	}

	.contact_us_area{
		text-align: center;
	}

	.contact_us_area .img{
		margin-bottom: 4rem;
	}
	
}



/*----- sm devices (tablets, 767px and down) -----*/

@media (max-width: 767px) {

	.hero_area h2 {
		font-size: 4rem;
	}

	.hero_area p{
		padding: 4rem 0;
	}
	
	.hero_area p br{
		display: none;
	}

	.hero_area .button{
		width: 100%;
	}

	.about_us_arae h4{
		font-size: 2.4rem;
	}

	.about_us_arae .content::before,
	.about_us_arae .content::after{
		width: 3.5rem;
	}

	.about_us_arae .content {
		padding-top: 11rem;
	}

	.title {
		font-size: 3.5rem;
	}

	.title br{
		display: none;
	}

	.leave_certificate_area .icon_box {
		margin-top: 2.4rem;
	}

	.leave_certificate_area .button{
		width: 100%;
		padding-left: 0;
		padding-right: 0;
		margin-top: 5rem;
	}

	.service_box ul li{
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
	}

	.service_box {
		margin-top: 2.4rem;
	}

	.contact_us_area{
		padding: 8rem 0;
	}

	.contact_us_area .img{
		width: 100%;
	}

	.contact_us_area .button{
		padding-left: 0;
		padding-right: 0;
		width: 100%;
		font-size: 2.2rem;
	}
	
}


/*----- xs devices (landscape phones, 575px and down) -----*/

@media (max-width: 575px) {

	html{
		font-size: 2.2vw;
	}

}