/* Dosis Reguler */
@font-face {
  font-family: dosis reguler;
  src: url(../fonts/Dosis/Dosis-Regular.ttf);
}
/* Dosis Medium */
@font-face {
  font-family: dosis medium;
  src: url(../fonts/Dosis/Dosis-Medium.ttf);
}
/* Dosis Bold */
@font-face {
  font-family: dosis bold;
  src: url(../fonts/Dosis/Dosis-Bold.ttf);
}
/* Dosis Semi-Bold */
@font-face {
  font-family: dosis semibold;
  src: url(../fonts/Dosis/Dosis-SemiBold.ttf);
}
/* Roboto Reguler */
@font-face {
  font-family: roboto reguler;
  src: url(../fonts/Roboto/Roboto-Regular.ttf);
}
/* Roboto Medium */
@font-face {
  font-family: roboto medium;
  src: url(../fonts/Roboto/Roboto-Medium.ttf);
}
/* Roboto Bold */
@font-face { 
  font-family: roboto bold;
  src: url(../fonts/Roboto/Roboto-Bold.ttf);
}

@font-face {
  font-family: roboto italic light;
  src: url(../fonts/Roboto/Roboto-LightItalic.ttf);
}

*{
	box-sizing:border-box;
}
body{
	margin:0px;
	padding:0px;
	font-size:16px;
	line-height:26px;
}
body p ,a{font-family: roboto reguler;}


a:hover{text-decoration:none;}

.wrap{
	width:1170px;
	margin:0px auto;
}


/* Header */
.header .logo{float:left;width:45%;padding:10px 10px;}
.header .contact{float:right;width:50%;height:55px;text-align:right;}
.header .contact ul li{list-style:none;display:inline-block;padding:5px 20px;}
.header .contact li a{color:#000;text-decoration:none;font-family: roboto reguler;}
.header .contact li i{margin-right:10px;}
.header .menu{float:right;width:60%;height:55px;text-align:right;}
.header .menu ul li{list-style:none;display:inline-block;padding:0px 20px;}
.header .menu ul a{color:#000;font-family: roboto reguler;text-decoration:none;font-size:18px;}
.header .menu ul li:hover{}
.header .menu ul li.active{border-bottom:2px solid #d61f26;}
.menu .button{display:none;}


/* Fix header */
.header .fixed-header { position: fixed; top: 0; left: 0; width: 100% !important;  }
.fixed-header img{width:80%;margin-top:10px;}
.header .fixed-header{background:#000;height:70px;}
.fixed-header ul li a{color:#fff !important;}

.fixed-header ul .mobile-nav { margin-top: 10px;position:absolute;top:70px;}
.fixed-header ul{margin-top:10px;}
nav { width: 100%; height: 60px;/* background: #fff; */ position: fixed;z-index: 10;top:50px;	}
nav div { color: white; font-size: 2rem;  line-height: 60px;position: absolute;top: 0; left: 2%; visibility: hidden;		}
.visible-title {visibility: visible;}
nav ul {  list-style-type: none; margin: 0px; padding-left: 0;text-align: right;  max-width: 100%;}
nav ul li { display: inline-block; line-height: 45px;  margin-left: 10px; }
nav ul li a {text-decoration: none; color: #a9abae; }


#aboutus {padding:40px 15px;}


/* Banner */
.banner {background:url('../images/Elegant banner.jpg');background-position:top center; background-repeat:no-repeat;background-size:cover;height:500px;}
.banner .bannertext{float:right; margin-top:170px;}
.banner .bannertext h1{font-size:40px;font-family: dosis semibold;color:#fff;}
.banner .bannertext p{font-size:18px;font-family: roboto reguler;color:#fff;padding-bottom:10px;}
.banner .bannertext a{text-decoration:none;color:#fff;background:#d61f26;width:260px;height:57px;border-radius:10px;outline:none;font-family: roboto reguler;font-size:18px;padding:15px;}


/* Section */
.section1 .title h1{font-size:35px;font-family: dosis medium;color:#000;text-align:center;}
.section1 .title p{font-size:16px;font-family: roboto reguler;color:#000;text-align:center;padding-bottom:25px;}
.section1 .sideimg{float:left;width:600px;height:400px;}
.section1 .sideimg img{width:600px;height:400px;}
.section1 .article{float:right;width:550px;}
.section1 .article p{font-size:16px;font-family: roboto reguler;color:#000;line-height:26px;}
.service .box{position:relative;float:left;width:390px;text-align:center;}
.service{background:#3333330a;height:345px;padding:40px 15px;}
.service .box h1{font-size:18px;font-family: roboto bold;color:#000;text-transform:uppercase;padding-top:10px;}
.service .box p{font-size:16px;font-family: roboto reguler;color:#000;line-height:26px;}


/* Testimonials */
.testimonial{background:url('../images/banner2.jpg');background-position:top center;background-repeat:no-repeat;background-size:cover;height:591px;margin-bottom:50px;}
.testimonial .text{text-align:center;padding-top:125px;}
.testimonial p{font-size:16px;font-family: roboto reguler;line-height:35px;color:#fff;width:792px;text-align:center;position:relative;margin:0px auto;}
.testimonial .fa-quote-left{font-size:40px;color:#fff;position:absolute;left:90px;top:-10px;}
.testimonial .fa-quote-right{font-size:40px;color:#fff;position:absolute;right:165px;bottom:-10px;}
.testimonial .text .photo img{margin-top:25px;}
.testimonial .text .photo h3{font-size:25px;color:#fff;  font-family: dosis reguler;margin:10px 0px;}
.testimonial .text .photo h4{font-size:16px;color:#fff;   font-family: roboto italic light;margin:5px 0px;}
.testimonial .owl-carousel .owl-item img{width:10%;display:unset;}


/* Work */
.Works{margin-top:50px;margin-bottom:50px;}
.Works .title h1{font-size:35px; font-family: dosis medium;text-align:center;}
.Works .title h4{font-size:25px; font-family: roboto reguler;text-align:center;}
/* .Works .box{position:relative;float:left;width:280px;height:250px;} */
.Works .owl-stage-outer{height:320px;}
.Works .box h4{font-size:25px; font-family: roboto reguler;text-align:center;}
.owl-carousel .owl-nav button.owl-prev{position:absolute;font-size:40px;top:95px;left:-30px;} 
.owl-carousel .owl-nav button.owl-next{position:absolute;font-size:40px;top:95px;right:-30px;} 

/* Form */
.form{margin-bottom:50px;}
.form .formbox{width:600px;height:600px;border-radius:10px;background:#d61f26;text-align:center;margin:0px auto;}
.form .title h1{font-size:30px; font-family: roboto bold;color:#fff;margin:0px;padding-top:50px;}
.form .title p{font-size:20px; font-family: roboto reguler;color:#fff;margin:0px;line-height:26px;padding-top:10px;padding-bottom:25px;}
.form .form-body input{width:550px; height:50px;outline:none;margin-top:15px;font-size:16px;font-family: roboto reguler;color:#fff;background:#000;border:none;padding-left:20px;}
.form .form-body textarea{width:550px; height:136px;background:#000;color:#fff;font-size:16px;font-family: roboto reguler;margin-top:15px;padding-left:20px;padding-top:15px;border:none;}
.form .btn{width:250px; height:50px;font-size:18px;color:#000;background:#fff;text-align:center;display:block;margin:20px auto;padding-top:12px;}
.form .btn a{text-decoration:none;color:#000;font-family:roboto reguler;}
/* Footer */
.footer{height:500px;background:#000;color:#fff;padding-left:15px;padding-right:15px;}
.footer .flogoarea{width:50%;float:left;}
.footer .flogoarea .flogo{padding-top:30px;padding-left:10px;}
.footer .flogoarea .article{padding-left:10px;}
.footer .flogoarea .article h2{font-size:18px; font-family: roboto bold; color:#fff;}
.footer .flogoarea .article p{font-size:16px; font-family: roboto reguler; color:#fff;width:325px;margin-bottom:10px;}
.footer .flogoarea .address ul{padding-left:10px;}
.footer .flogoarea .address li{list-style:none;display:block;padding-top:10px;}
.footer .flogoarea .address a{color:#fff;text-decoration:none;}
.footer .flogoarea .address i{font-size:22px;color:#fff;margin-right:7px;}

.footer .flogoarea .socialicon ul{padding-left:0px;}
.footer .flogoarea .socialicon li{list-style:none;display:inline-block;padding:10px 15px;}
.footer .flogoarea .socialicon i{color:#fff;}
.footer .map{float:right;width:50%;}
.footer .map iframe{padding-top:40px;}


.copyright {background:#000;padding-bottom:10px;}
.copyright a{color:#d61f26;}
.copyright p{color:#fff;text-align:center;margin:0px;}
.clear{clear:both;}

/* Responsive css code */

/* Laptop screen */
@media only screen and (min-width:993px) and (max-width:1440px){  
	.wrap{width:100%;}
	/* .header .contact{text-align: left;} */
	.header nav{background:none;right:0px;}
	.service{display:flex;}
	.service .box{margin-left:30px;width:30%;}
	.banner .bannertext {margin-right:100px;}
	.fixed-header .mobile-nav {margin-top: 10px;}
	.section1 .sideimg{float:left;width:45%; height:300px;margin-left:50px;}
	.section1 .sideimg img{width:100%;height:300px;}
	.section1 .article{width:45%;}
	.section1 .article p {padding-top:10%;margin:0px;}
}

/* Tablet screen */
@media only screen and (min-width: 768px) and (max-width:992px) {
	.wrap{width:100%;}
	.header .logo{width:20%;}
	.header .contact{width:70%;}
	.header .menu{width:70%;right:0px;top:45px;}
	.header nav{background:none;right:0px;}
	.menu ul{padding-right:10px; display:inline-block; margin-top:10px;}
	
	nav ul li {line-height:30px;}
	.header .logo img {display:block; width:200px; padding:10px;}
	.fixed-header .mobile-nav{margin-top:25px;}
	.header .menu ul li{padding:0px 10px;}
	.menu .button{display:none;}
	.fixed-header .button.visible-title i { visibility: hidden;}
	.menu.fixed-header {top: 0px;}
	.fixed-header .mobile-nav {margin-top: 25px;}
	.banne{margin-top:80px;}
	.banner .bannertext{float:none;margin:0px auto;text-align:center;padding-top:145px;}
	.section1 .sideimg{float:left;width:50%; height:300px;padding-left:20px;}
	.section1 .sideimg img{width:100%;height:300px;}
	.section1 .article{float:right;width:50%;}
	.section1 .article p{Width:90%; font-size:16px; line-height:20px;padding-top:20px;margin:0px;padding-left:20px;}
	
	
	.service {height:auto;}
	.service{display:flex;padding-top:25px;}
	.service .box{width:30%;margin-left:20px;}
	.Works .box h4{font-size:16px; font-family: roboto reguler;text-align:center;}
	.footer{padding:0px 10px;}
}


 @media only screen and (min-width: 100px) and (max-width:767px) { 
		.wrap{width:100%;}
		.header{height:215px;}
		.header .logo{float:none;text-align:center;width:100%; margin-top:20px;}
		
		nav {top:0px;}
		
		.header .contact{float:none;width:100%;text-align:center; height:auto;}
		.header .contact ul{padding-left:0px;}
		.header .contact span{display:none;}
		.header .menu{float:none; width:100%;text-align:center;background:#000; position: relative;display: inline-block;height:70px;}
		.menu.fixed-header { position: fixed;}
		.header .menu ul{padding-left:0px;text-align:right;width:100%;margin-top: 70px;}
		.header .menu ul li{display:block;background:#000;padding-right:15px;}
		.header .menu ul li:hover{border-bottom:none;border-left:5px solid #d61f26; border-right:5px solid #d61f26;}
		.header .menu ul a{color:#fff;}
		.menu .button{display:block;color:#fff;/* float:right; */width:100%;text-align:right;cursor:pointer;visibility:visible;position: absolute;padding-right: 5%;}
		nav div {visibility:hidden;position:static;}
		/* nav{top:198px;} */
		.menu .button i{padding-right:10px;padding-top:23px;}
		nav ul li{margin:0px;}
		.fixed-header img{width:40%;float:left;padding:5px 0px 0px 10px;}
		.fixed-header .button.visible-title i {padding-right: 20px;}
		.site-title.visible-title {visibility: hidden;  }
    .site-title img { visibility: hidden;width:20%;float:left;}
		
   #aboutus {padding: 40px 15px 0px;}
		.banner{}
		.banner .bannertext{float:none;text-align:center;padding-top:155px;margin-top:0px;}
		.banner .bannertext h1{font-size:30px;}
		.section1 .title p{padding:0px 5px;}
		.section1 .sideimg{float:none;width:100%;height:300px;}
		.section1 .sideimg img{width:100%;max-width:100%; height:auto;}
		.section1 .article{float:none;text-align:center;width:100%;}
		.section1 .article p{padding-top:15px;padding:15px 10px;}
		
		.service{display:flex;height:auto; padding:40px 15px 0px;}
		.service .box{width:100%;padding:10px;}
		
		.testimonial p{width:100%;line-height:30px;padding:0px 15px;}
		.testimonial .text{padding-top:60px;}
		.testimonial .fa-quote-left{font-size:40px;color:#fff;position:absolute;left:15px;top:-35px;}
		.testimonial .fa-quote-right{font-size:40px;color:#fff;position:absolute;right:65px;bottom:-10px;}
		.testimonial .owl-carousel .owl-item img{width:25%;display:unset;}
		
		.Works .box{width:100%;}
		
		.form .formbox{width:100%;}
		.form .form-body input{width:90%;}
		.form .form-body textarea{width:90%;}
		.form .btn{width:50%;}
		
		
		.footer{display:flex;height:auto;padding-left:10px;padding-right:10px;}
		.footer .flogoarea{width:100%;float:none;}
		.footer .map{width:100%;float:none;}
		.footer .flogoarea .article p{width:100%;}
		
		.mobile2 {display: none;} 
}