/* large Desktops and laptops ----------- */
@media only screen and (min-width: 1225px) and (max-width: 2500px) {
	.container {
		max-width: 1170px
	}

	.hero .heroContent p {
		width: 50%;
	}

	.heroContent p {
		width: 50%;
	}
}







/* Desktops and laptops  */
@media only screen and (min-width: 992px) and (max-width: 1224px) {
	.container {
		max-width: 960px;
	}

	.hero .heroContent p {
		width: 50%;
	}
}








/* TABLETS (portrait and landscape) */
@media only screen and (min-width: 768px) and (max-width: 991px) {
	.container {
		max-width: 720px
	}
}








/* TABLETS - SMARTPHONES LANDSCAPE (portrait and landscape)  */
@media only screen and (min-width: 481px) and (max-width: 767px) {
	.container {
		max-width: 640px;
	}

	.headerHero {
		height: 80vh !important;
	}

	.headerHero.about {
		height: auto !important;
	}

	.header .logoMenu .menu ul {
		gap: 12px;
	}

	.header .logoMenu .menu ul li {
		font-size: 10px;
	}

	.button {
		padding: 5px 15px;
		font-size: 10px;
	}

	.buttonOut {
		padding: 5px 15px;
		font-size: 10px;
	}

	.title {
		font-size: 25px;
		margin-bottom: 5px;
	}

	.subtitle {
		font-size: 13px;
		margin-bottom: 5px;
	}

	.aboutUs,
	.succesStory,
	.bestOffer,
	.workProcess,
	.whyChoseUs,
	.energy,
	.testimonial,
	.contactDetails,
	.content,
	.contactForm {
		padding: 40px 0;
	}

	.description {
		font-size: 10px;
		margin-bottom: 5px;
		line-height: 16px;
	}

	.aboutUs .left {
		height: 230px;
	}

	.aboutUs .right ul {
		row-gap: 8px;
		margin-bottom: 12px;
		margin-top: 10px;
	}

	.aboutUs .right ul li {
		font-size: 12px;
		gap: 5px;
	}

	.bestOffer .allOffer .sinOffer {
		width: 50%;
		margin: 0 8px;
	}

	.energy .left p {
		font-size: 13px;
		line-height: 23px;
	}

	.callUs .left {
		width: 45%;
	}

	.callUs .right {
		padding: 0 40px;
	}

	.callUs .right .callBtn {
		width: 25px;
		height: 25px;
		left: -30px;
		padding: 12px;
	}

	.callUs .right .callBtn img {
		width: 25px;
	}

	.whyChoseUs .provide {
		flex-wrap: wrap;
		row-gap: 20px;
	}

	.whyChoseUs .provide .sinProvide {
		padding: 20px;
		width: calc(48% - 40px);
	}

	.history img,
	.footerTop img {
		width: 30px;
		height: 30px;
		padding: 10px;
		margin-right: 10px;
	}

	.history h2 {
		color: var(--white);
		margin-bottom: 10px;
		font-size: 18px;
	}

	.contactForm .left {
		width: 25%;
	}

	.contactForm .right {
		width: 75%;
		gap: 3%;
		flex-wrap: wrap;
		row-gap: 12px;
	}

	.contactForm .right .controll input,
	.contactForm .right .controll select {
		width: calc(100% - 20px);
		padding: 10px 10px;
		font-size: 10px;
	}

	.contactForm .right .controll select {
		width: 100%;
	}

	.footerTop h2 {
		font-size: 12px;
	}

	.footerTop h5 {
		font-size: 11px;
	}


	.contactDetails .allDetails .sinDetails {
		width: 49%;
	}

	.contactUs {
		padding: 40px 0px;
	}

	.contactUs .contactData .conRight form {
		padding: 15px;
		border-radius: 15px;
	}

	.Gallery .gallry .singleSer {
		width: calc(31% - 30px);
	}

	.content .container {
		flex-direction: column;
	}

	.content .left,
	.content .right {
		width: 100%;
	}

	.content .left {
		margin-bottom: 25px;
	}

	.content .right .benefits {
		gap: 3%;
	}

	.content .right .benefits .sinBen {
		width: 48%;
	}

	.content .right .planing {
		padding: 40px 0 0 0;
		flex-direction: column;
	}

	.content .right .planing .plLeft,
	.content .right .planing .plRight {
		width: 100%;
	}
	
	
	
	
	
	
	
	.wrapper .orderForm {
		max-width: 640px;
	}

	.wrapper .orderForm .multiSteps {
		width: calc(100% - 40px);
		padding: 20px;
	}

	form.multiStepData .singleStep .options {
		flex-wrap: wrap;
	}

	form.multiStepData .singleStep input[type="text"],
	form.multiStepData .singleStep input[type="email"] {
		width: calc(48% - 4%);
		padding: 12px 2%;
	}

}








/* Smartphones (portrait and landscape)  */
@media only screen and (min-width: 320px) and (max-width: 480px) {
	.container {
		max-width: 360px;
	}

	.smd {
		display: none;
	}

	.column {
		flex-direction: column;
	}

	.full {
		width: 100% !important;
	}

	.button,
	.buttonOut {
		padding: 6px 15px;
		font-size: 11px;
		font-weight: 500;
	}

	.title {
		font-size: 24px;
		margin-bottom: 5px;
	}

	.subtitle {
		font-size: 13px;
		margin-bottom: 5px;
	}

	.aboutUs,
	.succesStory,
	.bestOffer,
	.workProcess,
	.whyChoseUs,
	.energy,
	.testimonial,
	.contactDetails,
	.Gallery,
	.content,
	.servicesRequest,
	.contactForm {
		padding: 40px 0;
	}

	.description {
		font-size: 13px;
		margin-bottom: 10px;
		line-height: 20px;
	}

	.flex-wrap {
		flex-wrap: wrap;
	}

	.header .logoMenu .logo {
		width: 45%;
	}

	.header .logoMenu .icon-menu {
		display: inline-block;
		font-size: 32px;
		color: var(--darkgreen);
		cursor: pointer;
	}

	.header .logoMenu .menu ul {
		gap: 15px;
		position: absolute;
		flex-direction: column;
		background: #fff;
		width: 300px;
		left: -121px;
		top: 141%;
		border-radius: 10px;
		padding: 0px 0px;
		height: 0;
		overflow: hidden;
	}

	.header .logoMenu .menu.active ul {
		padding: 15px 0px;
		height: auto;
	}

	.headerHero {
		height: 50vh !important;
	}
	.bannerSlider .item{
		height: 50vh;
	} 

	.bannerSlider .item>img {
		height: 50vh !important;
	}

	.headerHero.about {
		height: auto !important;
	}

	.heroContent h1 {
		font-size: 23px;
	}

	.aboutUs .left {
		height: 300px;
	}

	.aboutUs .right ul li {
		font-size: 13px;
	}

	.callUs .right {
		padding: 40px 15px 20px 15px;
		width: calc(100% - 30px);
	}

	.callUs .right .callBtn {
		width: 25px;
		height: 25px;
		top: -32px;
		left: 50%;
		transform: translateX(-50%);
		padding: 12px;
	}

	.callUs .right .callBtn img {
		width: 25px;
	}

	.whyChoseUs .provide .sinProvide {
		width: calc(100% - 40px);
	}

	.smb15 {
		margin-bottom: 15px;
	}

	.contactForm .right .controll input,
	.contactForm .right .controll select {
		width: calc(100% - 16px);
		padding: 7px 8px;
		border-radius: 5px;
		font-size: 13px;
	}

	.contactForm .right .controll select {
		width: 100%;
	}


	.contactUs {
		padding: 15px 0px 30px 0px;
	}

	.contactUs .contactData .conRight form .name {
		flex-direction: column;
		margin-bottom: 0;
	}

	.contactUs .contactData .conRight form input[type="text"],
	.contactUs .contactData .conRight form input[type="number"],
	.contactUs .contactData .conRight form input[type="submit"],
	.contactUs .contactData .conRight form textarea,
	.contactUs .contactData .conRight form input[type="email"] {
		width: calc(100% - 20px);
		padding: 8px 10px;
		margin-bottom: 10px;
	}

	.contactUs .contactData .conRight form input[type="submit"] {
		width: 100%;
	}

	.contactUs .contactData .conRight {
		width: 100%;
	}

	.Gallery .gallry .singleSer {
		width: calc(100% - 20px);
	}

	.Gallery .gallry .singleSer img {
		height: 220px;
	}





	.servicesRequest .wrap {
		max-width: 320px;
	}

	.servicesRequest .wrap form .control button {
		width: 100%;
		height: 40px;
	}

	.servicesRequest .wrap .fetch .details p {
		width: 100%;
	}


	.content .container {
		flex-direction: column;
	}

	.content .left,
	.content .right {
		width: 100%;
	}

	.content .left {
		margin-bottom: 25px;
	}

	.content .right .benefits {
		gap: 3%;
	}

	.content .right .benefits .sinBen {
		width: 48%;
	}

	.content .right .planing {
		padding: 40px 0 0 0;
		flex-direction: column;
	}

	.content .right .planing .plLeft,
	.content .right .planing .plRight {
		width: 100%;
	}



	.header .logoMenu .menu ul li ul {
		left: -50px;
		top: 20px;
		width: 200px;
		padding: 0 !important;
	}

	.sinService {
		width: calc(100% - 4%);
	}



	.slick-next::before,
	.slick-prev::before {
		color: #1D1D1F;
		font-size: 12px;
		background: #fff;
	}

	.slick-prev:before {
		content: '\e5c4';
		font-family: icomoon;
		background: #fff;
		width: 20px;
		height: 20px;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50%;
		color: #235127;
		font-size: 12px;
		opacity: 1;
	}

	.slick-next {
		right: 10px
	}

	[dir=rtl] .slick-next {
		right: auto;
		left: 10px
	}

	.slick-next:before {
		content: '\e5c8';
		font-family: icomoon;
		background: #fff;
		width: 20px;
		height: 20px;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50%;
		color: #235127;
		font-size: 12px;
		opacity: 1;
	}


	.proMenu .sinMenu {
		width: 100px;
		height: 100px;
	}
	.proMenu .sinMenu a img {
		width: 40px;
		margin-bottom: 10px;
	}
	.proMenu .sinMenu a h5 {
		font-size: 11px;
		text-align: center;
		line-height: 18px;
	}

	.productList {
		padding: 30px;
		flex-direction: column;
	}
	.productList .imgBx {
		width: calc(100% - 60px);
		border-right: none;
		border-bottom: 1px solid #ddd;
		padding: 30px;
	}
	.productList .info {
		width: 100%;
	}


	.video iframe{
		width: 100%;
		height: 250px !important;
	}
	
	
	
	
	
	
	
	
	.wrapper .orderForm {
		max-width: 360px;
	}

	.wrapper .orderForm .multiSteps {
		width: calc(100% - 30px);
		padding: 15px;
	}

	form.multiStepData .singleStep .options {
		flex-wrap: wrap;
	}

	form.multiStepData .singleStep input[type="text"],
	form.multiStepData .singleStep input[type="email"] {
		width: calc(100% - 4%);
		padding: 12px 2%;
	}
}

/*	Retina media query.
	Overrides styles for devices with a 
	device-pixel-ratio of 2+, such as iPhone 4.
-----------------------------------------------    */

@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {}