.contact-area {
	margin-top: -538px;
}
.contact-bg {
	box-shadow: 0px 16px 32px 0px rgba(228, 228, 228, 0.56);
	background: #ffffff;
	padding: 60px 60px 30px 60px;
}
.contact-map {
	min-height: 390px;
}
#appointment-form input {
	background: none;
	height: 60px;
	width: 100%;
	padding: 0 30px;
	padding-right: 30px;
	border: 0;
	color: #9d9d9d;
	font-weight: 400;
	border: 1px solid #ebebeb;
	font-size: 15px;
	text-transform: capitalize;
	border-radius: 5px;
}
#appointment-form textarea {
	color: #9d9d9d;
	font-weight: 400;
	height: 120px;
	width: 100%;
	padding: 30px 30px;
	border: 1px solid #ebebeb;
	text-transform: capitalize;
	background: none;
	border-radius: 5px;
}
#appointment-form input::-moz-placeholder, .appointment-form input::placeholder {
  color: #9d9d9d;
  font-size: 15px;
}
#appointment-form textarea::-moz-placeholder, .appointment-form textarea::placeholder {
  color: #9d9d9d;
  font-size: 15px;
}

.form-box,
.form-2-box,
.contact-icon {
	position: relative;
}
.form-box span,
.form-2-box span,
.contact-icon span {
	position: absolute;
	top: 22px;
	right: 20px;
	font-size: 16px;
	color: $theme-color;
}
.form-2-box span,
.contact-icon span {
	color: $white;
	top: 18px;
}
.contact-icon span {
	color: $theme-color;
}
#contact-form textarea {
	-moz-border-bottom-colors: none;
	-moz-border-left-colors: none;
	-moz-border-right-colors: none;
	-moz-border-top-colors: none;
	border-color: currentcolor currentcolor #328ef4;
	border-image: none;
	border-style: none none solid;
	border-width: 0 0 1px;
	color: $white;
	font-size: 14px;
	height: 98px;
	text-transform: capitalize;
	width: 100%;
	background:none;
	transition:.3s;
}
.contact-wrapper {
	margin-right: 70px;
}
#contact-form input {
	-moz-border-bottom-colors: none;
	-moz-border-left-colors: none;
	-moz-border-right-colors: none;
	-moz-border-top-colors: none;
	border-color: #328ef4;
	border-image: none;
	border-style: none none solid;
	border-width: 0 0 1px;
	color: #ffffff;
	font-size: 15px;
	height: 57px;
	text-transform: capitalize;
	width: 100%;
	background: none;
	transition: .3s;
	font-family: "cerebri_sansmedium";
}
#contact-form input::-moz-placeholder, .contact-form input::placeholder {
	color: $white;
	font-size: 15px;
	font-family: $c_med;
  }
  #contact-form input:focus {
	border-color: $white;
	border-bottom: 2px solid #fff;
}
  #contact-form textarea::-moz-placeholder, .contact-form textarea::placeholder {
	color: $white;
	font-size: 15px;
	font-family: $c_med;
  }
  #contact-form textarea:focus {
	border-color: $white;
	border-bottom: 2px solid #fff;
}
#contact-form button.btn {
	-moz-user-select: none;
	background: #fff;
	border: medium none;
	display: inline-block;
	font-size: 14px;
	margin-bottom: 0;
	padding: 20px 40px;
	text-align: center;
	text-transform: uppercase;
	-ms-touch-action: manipulation;
	touch-action: manipulation;
	-webkit-transition: all 0.3s ease 0s;
	-o-transition: all 0.3s ease 0s;
	transition: all 0.3s ease 0s;
	vertical-align: middle;
	white-space: nowrap;
	border-radius: 5px;
	position: relative;
	font-family: 'cerebri_sanssemibold';
	margin-top:5px;
}
.btn-texts {
	color:$black;
	position: relative;
	transition: .3s;
}
#contact-form button.btn:hover .btn-text{color:$white;}
.btn-texts i {
	padding-left: 5px;
}
#contact-form button.btn::before {
	display: none;
}
// .form-2-box{position: relative;}
// .form-2-box::after {
// 	position: absolute;
// 	content: "\f007";
// 	font-family: "Font Awesome 5 Pro";
// 	display: inline-block;
// 	font-size: 16px;
// 	text-align: center;
// 	right: 0;
// 	color: #ffffff;
// 	top: 20px;
// }
// .email-2-icon:after{
// 	content: "\f2b6";
// }
// .sub-icon:after{content: "\f107";}
// .message-2-icon::after {
// 	content: "\f040";
// 	top: 9px;
// }

// contact-3-style
.contact-us-area {
	margin-bottom: -567px;
	position: relative;
	z-index: 99;
}
.contact-2-map {
	min-height: 700px;
}
.single-contact-us {
	background-size: cover;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	background-position: center center;
	right: 0;
}
.contact-us-info {
	background: $white;
	padding: 37px 100px 37px 54px;
}
.contact-us-icon {
	float: left;
	margin-right: 20px;
}
.contact-us-text {
	overflow: hidden;
	& span{
		color:#ababab;
		font-size: 16px;
		font-family: $c_bold;
	}
	& h4{
		font-size: 22px;
		margin-bottom: 0;
		margin-top:4px;
	}
}
.contact-us-bg{background: $theme-color;}
.contact-us-wrapper {
	padding: 55px 70px 70px 40px;
}
.contact-us-content h1 {
	color: $white;
	font-size: 45px;
	margin-bottom: 40px;
}
#contact-us-form input {
	background: none;
	height: 60px;
	width: 100%;
	padding-left: 20px;
	border: 0;
	color: $white;
	font-family: "cerebri_sansregular";
	border: 1px solid #328ef4;
	font-size: 15px;
	text-transform: capitalize;
	border-radius: 5px;
	margin-bottom: 30px;
}
#contact-us-form textarea {
	color: $white;
	height: 120px;
	width: 100%;
	padding: 30px 30px;
	border: 1px solid #328ef4;
	text-transform: capitalize;
	background: none;
	border-radius: 5px;
	font-family: $c_reg;
	margin-bottom: 24px;
}
#contact-us-form input::-moz-placeholder, .contact-us-form input::placeholder {
  color: $white;;
  font-size: 15px;
}
#contact-us-form textarea::-moz-placeholder, #contact-us-form textarea::placeholder {
  color: $white;
  font-size: 15px;
}
#contact-us-form button.btn {
	-moz-user-select: none;
	background: #fff;
	border: medium none;
	display: inline-block;
	font-size: 14px;
	margin-bottom: 0;
	padding: 20px 40px;
	text-align: center;
	text-transform: uppercase;
	-ms-touch-action: manipulation;
	touch-action: manipulation;
	-webkit-transition: all 0.3s ease 0s;
	-o-transition: all 0.3s ease 0s;
	transition: all 0.3s ease 0s;
	vertical-align: middle;
	white-space: nowrap;
	border-radius: 5px;
	position: relative;
	font-family: 'cerebri_sanssemibold';
	margin-top:5px;
}
.btn-texts {
	color:$black;
	position: relative;
	transition: .3s;
}
.btn-texts i {
	padding-left: 5px;
}
#contact-us-form button.btn::before {
	display: none;
}
// appointment-2
.contact-2-area {
	background-size: cover;
	background-position: center center;
}
 .appointment-form input {
	height: 70px;
	width: 100%;
	padding: 0 30px;
	padding-right: 30px;
	border: 0;
	color: #a9bbc8;
	font-family: $c_reg;
	border: 2px solid #566875;
	font-size: 15px;
	text-transform: capitalize;
	border-radius: 5px;
	background: rgba(59,69,82,.6);
	transition: .3s;
}
.appointment-form input:focus {
	border-color: $white;
	border-bottom: 2px solid #fff;
	background: none;
}
.appointment-form textarea {
	color: #a9bbc8;
	font-family: $c_reg;
	height: 120px;
	width: 100%;
	padding: 17px 30px;
	border: 2px solid #566875;
	text-transform: capitalize;
	background: rgba(59,69,82,.6);
	border-radius: 5px;
	transition: .3s;
}
.appointment-form textarea:focus {
	border-color: $white;
	border-bottom: 2px solid #fff;
	background: none;
}
 .appointment-form input:focus::-moz-placeholder, .appointment-form input:focus::placeholder {
	color:$white;
  }
 .appointment-form input::-moz-placeholder, .appointment-form input::placeholder {
	color: #a9bbc8;
	font-size: 15px;
	font-family: $c_reg;
  }
.appointment-form textarea::-moz-placeholder, .appointment-form textarea::placeholder {
	color: #a9bbc8;
	font-size: 15px;
	font-family: $c_reg;
  }
  .appointment-form textarea:focus::-moz-placeholder, .appointment-form textarea:focus::placeholder {
	color:$white;
  }
  .appointment-form .form-box::after {
	color: #ffffff;
	top: 24px;
}
.contact-2-btn .btn {
	padding: 21px 90px;
}


/* 20. Contact */
.contact-page-map{
	height: 30%;
  }
//   .contact-info-area {
// 	  margin-top: -140px;
//   }
  .contact {
	  padding: 70px 10px;
  }
  .contact-area {
	background-position: center center;
	background-repeat: no-repeat;
  }
  .contact i {
	  background: #0963AD;
	  font-size: 21px;
	  height: 70px;
	  width: 70px;
	  color: #ffffff;
	  border-radius: 50%;
	  line-height: 71px;
	  margin-bottom: 30px;
	  display: inline-block;
  }
  .contact h3 {
	  font-size: 25px;
	  margin-bottom: 15px;
	  color: #fff;
  }
  .contact p {
	  margin: 0;
	  padding: 0 50px;
	  color: #fff;
  }

  @media only screen and (min-width: 992px) and (max-width: 1200px) {
	.contact p {
	  padding: 0 10px;
	}
  }

  @media only screen and (min-width: 768px) and (max-width: 991px) {
	.contact p {
	  padding: 0 0px;
	}
  }
  .contact-form-page .appointment-form input {
	  border: 2px solid transparent;
	  text-transform: capitalize;
	background: #f4f4f4;
	font-size: 15px;
	color: #696969;
  }
  .contact-form-page .appointment-form input:-moz-placeholder{
	color: #696969;
  }
  .contact-form-page .appointment-form input::placeholder{
	color: #696969;
  }
  .contact-form-page .appointment-form textarea {
	  border: 2px solid transparent;
	  text-transform: capitalize;
	background: #f4f4f4;
	font-size: 15px;
	color: #696969;
  }
  .contact-form-page .appointment-form .form-box::after {
	  color: #0963AD;
  }
  .contact-form-page.appointment-form input:focus::-moz-placeholder, .appointment-form input:focus::placeholder {
	color: #696969;
  }
  .contact-form-page .appointment-form input:focus, .appointment-form input:focus {
	border-color: #0963AD;
  }
  .contact-form-page .appointment-form textarea:focus::-moz-placeholder, .appointment-form textarea:focus::placeholder {
	  color: #696969;
  }
  .contact-form-page .appointment-form textarea:focus, .appointment-form textarea:focus {
	  border-color: #0963AD;
  }
  .contact-form-page .appointment-form textarea::-moz-placeholder, .appointment-form textarea::placeholder {
	color: #696969;
  }
  .contact-form-page .appointment-form textarea:focus, .appointment-form textarea:focus {
	  border-color: #0963AD;
  }

  input:focus:-moz-placeholder{
	opacity: 0;
  }
  input:focus::placeholder{
	opacity: 0;
  }

  textarea:focus:-moz-placeholder{
	opacity: 0;
  }
  textarea:focus::placeholder{
	opacity: 0;
  }


  /* carrer  */
  .carrer-cat {
	background: #f76840;
	padding: 40px 15px;
	transition: .3s;
	-webkit-transition: .3s;
	-moz-transition: .3s;
	-ms-transition: .3s;
	-o-transition: .3s;
  }
  .carrer-cat:hover {
	box-shadow: 0 10px 15px rgba(25, 25, 25, 0.1);
  }
  .carrer-cat h3 {
	color: #fff;
	font-size: 24px;
	margin: 0;
  }
  .carrer-cat img {
	margin-bottom: 20px;
  }
  .job-list {
	background: #fff;
	padding: 40px;
	padding-top: 35px;
	transition:.3s;
	-webkit-transition:.3s;
	-moz-transition:.3s;
	-ms-transition:.3s;
	-o-transition:.3s;
  }
  .job-list:hover {
	  box-shadow: 0 10px 15px rgba(25, 25, 25, 0.1);
  }
  .job-list h3 {
	  font-size: 24px;
	  margin-bottom: 15px;
	  display: inline-block;
  }