@media (min-width:300px) and (max-width:600px) {

	header .topheader .phone,
	header .topheader .mail {
		font-size: 0 !important;
	}

	.wp-block-navigation__responsive-container-close {
		display: flex !important;
		position: absolute !important;
		top: 20px !important;
		right: 20px !important;
		z-index: 100000 !important;
		color: #000 !important;
		background-color: transparent !important;
		border: none !important;
		width: 40px !important;
		height: 40px !important;
		align-items: center;
		justify-content: center;
	}

	.wp-block-navigation__responsive-container-close svg {
		display: none !important;
	}

	.wp-block-navigation__responsive-container-close::before {
		content: "\f00d" !important;
		font-family: "Font Awesome 7 Free" !important;
		font-weight: 900 !important;
		font-size: 28px !important;
		color: #000 !important;
	}

	.wp-block-navigation__responsive-container ul {
		padding-left: 20px;
	}

	html,
	body {
		overflow-x: hidden;
	}

	/* About Section Fixes for Mobile */
	.aboutsection .wp-block-columns {
		padding-left: 1rem !important;
		padding-right: 1rem !important;
	}

	.aboutsection .abouticons p {
		display: flex;
		align-items: center;
		white-space: normal;
		word-wrap: break-word;
		font-size: 0.95rem !important;
		line-height: 1.4;
	}

	.aboutsection .abouticons p::before {
		flex-shrink: 0;
		margin-right: 10px !important;
	}

	.hero {
		padding: 0px !important;
		text-align: center;
	}

	.hero .main-column {
		padding-top: 4.06rem !important;
	}

	.hero .mainheading {
		font-size: 2.5rem !important;
	}

	.hero .subheading {
		font-size: 2.75rem !important;
	}

	.hero .para {
		max-width: 30rem;
		text-align: center;
		padding: 0 10px;
	}

	.experience {
		top: 60%;
		font-size: 2rem;
	}

	.hero .btn-div,
	.hero .customercount {
		display: block !important;
		padding: 0 15px;
	}

	.hero .callbtn {
		width: stretch;
	}

	.hero .emergencyservice {
		width: 200px;
		position: absolute;
		bottom: 0%;
		left: 24%;
	}

	.hero .hero-img img {
		height: 400px !important;
		padding: 0 15px;
	}

	.hero .emergency-group {
        bottom: 0%;
        right: 30%;
    }

	.aboutsection .about-column {
		padding-left: 1rem !important;
		padding-right: 1rem !important;
	}

	.aboutsection .abouticons {
		width: 350px !important;
	}

	.aboutsection .about-details-column {
		padding: 0 0.2rem !important;
	}

	.aboutsection .aboutexperience {
		top: 43%;
	}

	.servicesection .service-column {
		padding-left: 2rem !important;
		padding-right: 2rem !important;
	}

	.footer-copyright {
		display: block !important;
	}

}

@media (min-width:300px) and (max-width:600px) {
	/* .wp-block-columns {
		padding: 1.5rem !important;
	} */

	footer.wp-block-template-part .is-layout-flex {
		display: block;
	}

	footer.wp-block-template-part .is-layout-flex .footer-copyright {
		text-align: center;
		margin-bottom: 1rem;
	}

	footer.wp-block-template-part .is-layout-flex .is-layout-flex {
		display: flex;
		justify-content: space-between;
	}

	.wp-block-group.customer-group {
		margin-bottom: 1rem;
	}

}

/* Mobile */
@media (max-width: 768px) {

	.headersection-menu {
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		flex-wrap: nowrap !important;
	}

	.headersection-menu-logo {
		flex: 0 0 80% !important;
		max-width: 80% !important;
		margin: 0 !important;
	}

	.headersection-menu-icon {
		max-width: 20% !important;
		display: flex !important;
		justify-content: flex-end;
		align-items: center;
		margin: 0 !important;
	}


}

@media (min-width:300px) and (max-width:400px) {
	.hero .mainheading {
		font-size: 2rem !important;
	}

	.hero .subheading {
		font-size: 2.05rem !important;
	}

	.aboutsection .aboutexperience {
		top: 45%;
	}

	.aboutsection .about-details-column {
		padding: 0 0.2rem !important;
	}

	.aboutsection h1,
	.servicesection h2 {
		font-size: 2.1rem !important;
	}

	.servicesection .service-para {
		padding: 0 10px;
	}

	.footer-copyright {
		display: block !important;
	}


}

@media (min-width:768px) and (max-width:800px) {
	.hero .experience {
		width: 100px;
		position: absolute;
		top: 52%;
		right: 38px;
	}

	.hero .emergency-group {
        bottom: 2%;
        right: 37%;
    }

	.aboutsection .aboutexperience {
		bottom: 43%;
	}
}

@media (min-width:800px) and (max-width:1000px) {
	.hero .emergencyservice {
		width: 200px;
		position: absolute;
		bottom: 30%;
		left: 50%;
	}

	.hero .customer img {
		vertical-align: middle;
		background-color: #fbbf24;
		border-radius: 20px;
		width: 20px;
		height: 20px;
		padding: 5px;
	}

	.hero .jobs img {
		vertical-align: middle;
		background-color: #fbbf24;
		border-radius: 20px;
		width: 20px;
		height: 20px;
		padding: 10px;
	}

	.hero .customer-group {
		padding: 0px 10px 0 10px;
	}

	.hero .jobs-group {
		padding: 10px 10px 10px 10px;
	}

	.hero .customer-group i,
	.hero .jobs-group i {
		font-size: 15px;
	}

	
	.hero .emergency-group {
        bottom: 27%;
        right: 15%;
    }

	.aboutsection .aboutexperience {
		position: absolute;
		bottom: 20%;
		left: 2%;
		width: 100px;
		height: 115px;
	}
}

@media (min-width:1024px) and (max-width:1280px) {
	.hero .customer {
		padding-left: 0.5rem !important;
		padding-right: 0.5rem !important;
		grid-template-columns: 30% auto !important;
	}

	.hero .customer-group {
		padding: 0px 10px 0 10px;
	}

	.hero .jobs-group {
		padding: 10px 10px 10px 10px;
	}
	.hero .emergency-group {
        bottom: 6%;
        right: 28%;
    }

	.hero .jobs {
		padding-left: 0.5rem !important;
		padding-right: 0.5rem !important;
		grid-template-columns: 35% auto !important;
	}
}