*,*:before,*:after{
	box-sizing: border-box;
	margin:0;
	padding:0;
}

html{
	scroll-behavior: smooth;
}

body{
	overflow-x: hidden !important;
	font-family: 'Montserrat', sans-serif;

}


/*			header styles     */

header{
	height: 8vh;
	background-color: #f7b532;
}

header a{
	color: #fff;
	font-size: 1.8rem;
	text-decoration: none;
	font-weight: 700;

}

a:hover{
	color: #fff;
	text-decoration: none;
}



/*			mainpage style 			*/



.slide__first{
	position: relative;
	}

.slide__first img{
	filter: brightness(0.7);
	width: 100%;
	object-fit: cover;
	height: 92vh;

}	

.main-title{
	position: absolute;
	top: 35%;
	right: 27%;
	/*transform: translate(-100% -50%);*/
	text-align: center;
	width: 50%;
	color: #fff;
	z-index: 101 !important;
}

.main-title h1{
	font-size: 2.7rem;
}

.main-title p{
	font-size: 18px;
	text-align: center;
	width: 100%;
	display: inline-block;
}

.main-title button{
	background-color: #f7b532;
	border-radius: 15px;
	padding: 10px 30px;
	border: none;
	font-size: 1.2rem;
	}

.main-title button:hover{
	background-color: #e39700;
	transition: 0.5s;
}


/*	 		about page style  			*/


.border {
    width: 100px;
    height: 5px;
    background: #000;
}

.about .phone a{ 
	font-size: 2rem;
	color: #000 !important;
}


.about-text{
	background-color: #f7b532;
	margin: 0 auto;
}

.about-text h1{
	text-align: left;
	opacity: 0;
}

.about-text p{
	opacity: 0;
}

.about-image img{
	width: 90%;
	height: auto;
}

.about .phone{
	opacity: 0;
}



/*    	services styles		*/

.services .my-container{
	width: 85%;
	margin: 0 auto;
}

.services{
	background-color: #f7f7f7;
}

.services h1{
	text-align: center;
}

.cards{
	counter-reset: step;
}

.card{
	background-color: #fff;
	text-align: center;
	position: relative;
	min-height: 270px;
	
}

.card:after{
	content: '';
	content: counter(step);
	counter-increment: step;
	padding: 20px 30px;
	color: #fff;
	border-radius: 50%;
	background-color: #f7b532;
	position: absolute;
	top: -35px;
	left: calc(50% -30px);
}

.phone-div{
	text-align: center;
}

.services .phone{
	font-size: 2rem;
	color: #000;
}


/*    technique section		*/

.technique{
	background-color: #f7b532;
	min-height: 70vh;
}

.technique h2{
	text-align: center;
	color: #000;
	font-size: 2.2rem;
	font-weight: bolder;
}

.sl__slide{
  margin: 0 10px;
  height: auto;
  background-color: #fff;
}

.sl__slide img{
	width: 100%;
	height: auto;
}


.sl__text{
  color: #000;
  text-align: left;
  padding: 20px 0;
}


.sl__zag, .sl__desc{
  margin: 0;
  padding: 0 0px;
}

.sl__zag{
	font-size: 16px;
	font-weight: bolder;
}

.middle_details button{
	background-color: #f7b532;
	border-radius: 15px;
	padding: 10px 30px;
	border: none;
	}

.middle_details button:hover{
	background-color: #e39700;
	transition: 0.5s;
}


/*		advantages section style 		*/

.advantages .my-container{
	width: 85%;
	margin: 0 auto;
}

.advantages h2{
	text-align: center;
}

.cards-advantages{
	counter-reset: step;
}

.card-advantages{
	text-align: center;
	border: 1px solid #f7b532;
	min-height: 355px;
}

.card-advantages h4{
	font-size: 20px;
}

.card-advantages p{
	font-size: 14px;
}


.card-advantages i{
	font-size: 5rem;
	color: #f7b532;	
	transition: 0.5s;
	position: relative;
}

.card-advantages i:hover{
	transform: scale(1.2);
}

.card-advantages:after{
	content: "0" counter(step);
    counter-increment: step;
	font-size: 150px;
	font-family: bolder;
	font-family: 'Lato', sans-serif;
	opacity: 0.2;
	color: #f7b532;
	position: absolute;
	top: 0%;
	z-index: -1;
}

.advantages-wrapper{
	opacity: 0;
}


/*      form style    */

section.form-section{
	background: url(../img/bg_white.jpg);
	color: #000;
}

.contact-section{
	background: url(../img/form_background.jpg) no-repeat center;
	padding: 40px 0;
	background-size: cover;
	position: relative;
}

.contact-section h1{
	text-align: center;
	color: #fff;
}

.contact-section p{
	text-align: center;
	max-width: 50%;
	margin: 0 auto;
	color: #fff;
}


.contact-form{
	max-width: 600px;
	margin: auto;
	padding: 0 10px 50px 10px;
	overflow: hidden;
}

.contact-form-text{
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 16px 0;
	border: 1px solid gray;
	background: #fff;
	padding: 20px 40px;
	outline: none;
	color: #514e4e;
	transition: 0.5s;
}

.contact-form-text:focus{
	box-shadow: 0 0 10px 4px #34495e;
}

textarea.contact-form-text{
	resize: none;
	height: 120px;

}

.btn1{
	background-color: #f7b532;
	padding: 10px 50px;
	border-radius: 30px;
	color: #fff;
	text-transform: uppercase;
}

.btn1:hover{
	background-color: #e39700;
	transition: 0.5s;
	color: #000;
}

.contact-form p{
	display: none;
}



/*		footer styles 		*/

footer{
	background-color: #f7b532;
	color: #fff;
}

footer a{
	font-size: 1.8rem;
	color: #fff;
	font-weight: 700;
}







@media(max-width: 1024px){
	.card h4{
		font-size: 15px;
	}
	.card p{
		font-size: 12px;
	}
	.advantages .my-container{
		width: 95%;
	}
	.card-advantages h4{
		font-size: 15px;
	}
	.card-advantages p{
		font-size: 12px;
	}
}

@media(max-width: 992px){
.sl__slide{
		height: auto !important;
	}
.main-title{
	width: 70%;
	right: 15%;
}	
}


@media(max-width: 768px){
	.card{
		margin-bottom: 3rem;
	}
	.cards-second-row{
		margin-top: 0 !important;
	}
	.card h4{
		font-size: 24px;
	}
	.card p{
		font-size: 14px;
	}
	.card-advantages{
		margin-bottom: 3rem;
	}
}



@media(max-width: 650px){
	.sl__zag{
		font-size: 14px;
	}

	p.sl__desc{
		font-size: 13px !important;
	}
}

@media(max-width:575px){
	.sl__zag{
		font-size: 16px;
	}

	p.sl__desc{
		font-size: 15px !important;
	}
}


@media(max-width: 1290px){
	.sl__slide{
		height: 390px
	}

	.sl__zag{
		font-size: 14px;
	}

	p.sl__desc{
		font-size: 13px !important;
	}
}


@media(max-height: 600px){
	.main-title{
		top: 25%;
	}
	header{
		height: 15vh;
	}
	.main-title h1{
		font-size: 2rem;
	}
	.main-title p{
		font-size: 14px;
	}
	.main-title button{
		font-size: 14px;
	}
	header a{
		font-size: 1.2rem;
	}
	footer a{
		font-size: 1.3rem;
	}
	footer a{
		font-size: 1.2rem;
	}
	footer a{
		font-size: 1.3rem;
	}
}


@media(max-width: 420px){
	.main-title{
		top: 10%;
	}
	.main-title h1{
		font-size: 2rem; 
	}
	.main-title p{
		font-size: 14px;
	}
	.main-title button{
		font-size: 14px;
	}
	header a{
		font-size: 1rem;
	}
	footer a{
		font-size: 1rem;
	}
}

@media(max-height: 400px){
	.main-title{
		top: 10%;
	}
}