/*!
Template Name: One Page Construction
Template URI: https://www.template.net
Author: Template.net
Author URI: https://www.template.net
License: Template.net
License URI: https://www.template.net/license-agreement
*/



 * {
 	-webkit-box-sizing: border-box;
 	-moz-box-sizing: border-box;
 	box-sizing: border-box;
 }

 *:before,
 *:after {
 	-webkit-box-sizing: border-box;
 	-moz-box-sizing: border-box;
 	box-sizing: border-box;
 }

 figure {
 	margin: 0;
 }

 body {
 	width: 100%;
 	margin: 0px;
 	padding: 0px;
 	font-size: 16px;
 	line-height: 1.3;
 	overflow-x: hidden;
 	background-color: #fff;
 	font-family: 'Montserrat', sans-serif;

 }

 body,
 html {
  width: 100%;
 	height: 100%;
 }

 .btn:focus,
 .btn:active {
 	outline: none !important;
 	box-shadow: none;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 ul,
 p {
 	margin: 0px;
 	padding: 0px;
 }

 ul {
 	list-style-type: none;
 	margin: 0;
 	padding: 0;
 	display: inline-block;
 }

 li {
 	display: inline-block;
 }

 a {
 	cursor: pointer;
 	color: #000000;
 }

 a:hover {
 	text-decoration: none;
 }

 textarea {
 	resize: none;
 }

 hr {
  width: 100px;
  border: 2px solid #ffffff;

 }

 hr .hrfaq{
  width: 100px;
  border: 2px solid #000000;

 }

 .container {
 	max-width: 1410px;
 }


 /*-- header start --*/




 .serviceprice
 {
  text-align: center;
  background-color: grey;
  width: 500px;
  height: 600px;
 }


 header {
  position: fixed;
  width: 100%;
  z-index: 99;
  margin-top: 0px;
  transition: 0.7s;
 }


 header .navbar .nav-item .nav-link {
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
  transition: all 0.7s ease;
  color: #F81D2D;
  padding: 0px 0px 5px 30px ;
 }

 header .navbar .nav-item .nav-link:hover {
  color: white;
 }

 .navbar-toggler {

  background-color: #F81D2D;
}



ul.navbar-nav {
    margin-left: 1200px;
}

.navbar-fixed-top.scrolled {
  background-color: #7A7A7A !important;
  transition: background-color 200ms linear;
}



.dropbtn {

  background-color: #4CAF50;
  color: white;
  border: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {

  margin-top: 2px;
  display: none;
  position: absolute;
  font-size: 14px;
  background-color: grey;
  width: 480px;
  height: 150px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  font-family: Georgia, serif;
  color: white;
  padding-top: 10px;
  padding-bottom:10px;
  padding-right: 10px;
  padding-left: 15;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {color:#F81D2D;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: transparent;}




.dropbtn2 {

  background-color: #4CAF50;
  color: white;
  border: none;
}

.dropdown-content2 {
  margin-top: 2px;
  display: none;
  position: absolute;
  font-size: 13px;
  background-color: grey;
  width: 350px;
  height: 110px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content2 a {
  font-family: Georgia, serif;
  color: white;
  padding-top: 10px;
  padding-bottom:10px;
  padding-right: 5px;
  padding-left: 5;
  text-decoration: none;
  display: inline-block;
}

.dropdown-content2 a:hover {color:#F81D2D;}

.dropdown:hover .dropdown-content2 {display: block;}

.dropdown:hover .dropbtn2 {background-color: transparent;}



 
/*header close*/



/*calculation page invoice */


 .body-main {
     background: #ffffff;
     margin-top: 30px;
     height: auto;
     margin-bottom: 20px;
     padding: 50px 0px !important;

     position: relative;
     box-shadow: 0 1px 21px #808080;
     font-size: 10px
 }

 .main thead {
     background: #1E1F23;
     color: #fff
 }

 .img {
     height: 100px
 }

 h1 {
     text-align: center
 }












/*about-us page design*/

.jumbotron {
  color: white;
  background-color: #B0BEC5; 
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 35vh;
}

.display-4 {
  text-align: center;
  font-size: 40px;
  margin-top: 130px;
  font-weight: 500;
}


/*our team page*/


section .section-title {
    text-align: center;
    color: #000000;
}

#team .card {
    width: 250px;
    border: none;
    background: #ffffff;
      height: 220px;
   
}



.frontside {
    position: relative;
    -webkit-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    z-index: 2;
    margin-bottom: 30px;
}



.frontside .card .card-title {
    color: #000000 ;
}

.frontside .card .card-body img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
}


/*Deck page*/

.deckol {
  list-style-type: inherit;
}






/*video start*/


.headerr {
  position: relative;
  background-color: #F81D2D;
  height: 120vh;
  min-height: 25rem;
  width: 100%;
  overflow: hidden;
}


.headerr video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

.headerr .container {
  position: relative;
  z-index: 2;
}

.headerr .overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: black;
  opacity: 0.5;
  z-index: 1;
}

@media (pointer: coarse) and (hover: none) {
  .headerr {
    background: url('https://source.unsplash.com/XT5OInaElMw/1600x900') black no-repeat center center scroll;
  }
  .headerr video {
    display: none;
  }
}

/* video close*/

/*-- why hire us start --*/


 .counting {
  margin-top:auto;
  margin-bottom:auto;
  background-image: url('../images/Menue-Background.png');
  width: 100%;
  height: 580px;
 }

  .counting-header {
    background-color: transparent;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 280px;
  position: relative;

 }


 .counting-inner {
  background-color: transparent;
  background-repeat: repeat;
  background-size: cover;
  width: 100%;
  height: 350px;
  position: relative;
 }


 .counting-inner .gradient {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color:transparent;
  opacity: 0.7;
 }




.box
{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 300px;
  background-color: transparent;
  box-sizing: border-box;
  box-shadow: 0 5px 5px black;
  border:2px solid rgba(0,0,0,.5);
}


.box .content{
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  border: 5px solid white;
  padding: 30px;
  box-shadow: 0 5px 10px #F81D2D;
  text-align: center;
}
.box .content h1{
  color: #fff;
  font-size: 30px;
  margin: 0 0 10px;
  padding: 0;

}

.box .content h1:hover{
  color:black;

}

.box .content p:hover{
  color:black;
}

.box .content p{
 color: #fff;
}
.box svg,
.box svg rect{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  fill: transparent;
}
.box svg rect{
  stroke: #0093ff;
  stroke-width:10px;
  stroke-dasharray: 400;
  animation: animate 3s linear infinite;

}

@keyframes animate
{
  0%{
    stroke-dashoffset:800;
  }
  100%{
    stroke-dashoffset:0;
  }

}
 

 

 /*-- why hire us end --*/

 /*-- services start --*/
 .services {
 	padding-bottom: 75px;

 }

 .services .services-content {
 	width: 1210px;
 	margin: 0 auto;
 }

 .services .services-content h2 {
 	font-size: 44px;
 	color: #000000;
 	font-weight: bold;
 	text-align: center;
 	margin-bottom: 40px;
 }

 .services .services-content p {
  text-align: justify;
 	font-size: 16px;
 	line-height: 22px;
 	color: black;
 	font-family: "Poppins", Sans-serif;
 	margin-right: 10%;
  font-weight: 200;
 }

 .services .services-content a {

  text-align:left;
  font-size: 16px;
  color: black;
  font-family: "Poppins", Sans-serif;
  font-weight: 600;
  transition: 0.5s;

 }

 .services .services-content a:hover{

  color: #F81D2D;
  font-size: 20px;
 }

 /*-- services end --*/



 /*-- portfolio start --*/

 .portfolio {
 	padding-bottom: 188px;
 }

 .portfolio h2 {
 	font-size: 44px;
 	color: #000000;
 	text-align: center;
 	font-weight: bold;
 }

 .Gallary {
 	padding-top: 75px;
 }

 .carousel-inner img {
 	width: 100%;
 	height: 100%;
 	object-fit: cover;
 }

 .carousel-inner .content-1 {
 	padding-right: 10px;
 }

 .carousel-inner .content-2 {
 	padding-left: 35px;
 }

 .carousel-inner figure {
 	margin-bottom: 0;
 	width: 100%;
 	height: 100%;
 	object-fit: cover;
 }

 .carousel-inner h3 {
 	font-size: 26px;
 	color: #000000;
 	font-weight: 600;
 	margin: 14px 0 10px 0;
 }

 .carousel-inner p {
 	font-size: 18px;
 	line-height: 30px;
 	color: #000000;
 	font-family: Arial, Helvetica, sans-serif;
 }

 .carousel-inner .text {
 	margin-top: 36px;
 	margin-bottom: 30px;
 }

 .portfolio a {
 	font-size: 18px;
 	font-family: Arial, Helvetica, sans-serif;
 	font-weight: bold;
 	padding: 8px 39px;
 	text-align: center;
 	color: #ffffff;
 	display: inline-block;
 	background-color: #000000;
 	border: 1px solid transparent;
 	transition: 0.7s;
 }

 .portfolio a:hover {
 	border: 1px solid #000000;
 	color: #000000;
 	background-color: #ffffff;
 }

 .portfolio .carousel-indicators {
 	position: absolute;
 	bottom: -32%;
 }

 .carousel-indicators li {
 	background-color: #cccccc;
 	width: 20px;
 	height: 20px;
 	border-radius: 60%;
 }

 .carousel-indicators .active {
 	background-color: #F81D2D;
 }

 /*-- portfolio end --*/

 /*-- construction-team start --*/


/*
 .construction-team {
 	margin-bottom: 105px;
 }

 .construction-team .carousel-indicators {
 	display: none;
 }

 .construction-team .thumbnail figure {
 	margin-bottom: 0;
 	width: 100%;
 	height: 100%;
 }

 .construction-team .thumbnail img {
 	height: fit-content;
 	left: 0;
 	margin-left: -25vw;
 	margin-right: -25vw;
 	max-width: 58vw;
 	position: relative;
 	right: 25%;
 	width: 58vw;
 	object-fit: cover;
 }

 .construction-team .card {
 	border: 0;
 	border-bottom: 1px solid #000000;
 	border-radius: 0;
 }

 .construction-team .controls-bottom {
 	margin-top: 37px;
 	margin-bottom: 43px;
 }

 .construction-team .controls-bottom a {
 	background: #bbbbbb;
 	border-radius: 60px;
 	width: 45px;
 	height: 45px;
 	display: inline-block;
 	padding: 5px 12px;
 	text-align: center;
 	margin-right: 7px;
 }

 .construction-team .controls-bottom a:hover {
 	background-color: #636363;
 }

 .construction-team .controls-bottom i {
 	font-size: 35px;
 	color: #ffffff;
 }

 .construction-team .fa-facebook-square {
 	color: #0054a6;
 }

 .construction-team .fa-twitter-square {
 	color: #00aeef;
 }

 .construction-team .fa-linkedin {
 	color: #005b7f;
 }

 .construction-team .fa-instagram {
 	color: #ef4b78;
 }

 .construction-team h3 {
 	font-size: 44px;
 	color: #000000;
 	font-weight: bold;
 	margin-bottom: 19px;
 }

 .construction-team p {
 	font-size: 18px;
 	line-height: 32px;
 	color: #636363;
 	font-family: Arial, Helvetica, sans-serif;
 	margin-bottom: 40px;
 }

 .construction-team .card-body .card-title {
 	font-size: 26px;
 	color: #000000;
 	font-weight: 600;
 	margin-bottom: 4px;
 }

 .construction-team .card-body .card-text {
 	font-size: 20px;
 	color: #636363;
 	font-weight: 600;
 	margin-bottom: 17px;
 }

 .construction-team-inner {
 	margin-top: 23px;
 }

 .construction-team .card-body {
 	padding: 38px 0 40px 0;
 }

 .construction-team span i {
 	font-size: 26px;
 	margin-right: 25px;
 }

 .nogap > .col {
 	padding-left: 50.5px;
 	padding-right: 50.5px
 }

 .nogap > .col:first-child {
 	padding-left: 15px;
 }

 .nogap > .col:last-child {
 	padding-right: 15px;
 }


*/
 /*-- construction-team end --*/




 /*-- construction-looking start --*/

 .construction-looking {
 	background-image: url('../images/construction-bg.jpg');
 	background-repeat: no-repeat;
 	background-size: cover;
 	width: 100%;
 	height: auto;
 	position: relative;
 }

 .looking-innar {
 	padding-top: 120px;
 	padding-bottom: 95px;

 }

 .construction-looking h2 {
 	color: #ffffff;
 	font-weight: bold;
 	font-size: 44px;
 	margin-bottom: 25px;
 }

 .construction-looking p {
 	font-size: 18px;
 	line-height: 32px;
 	color: #ffffff;
 	font-family: Arial, Helvetica, sans-serif;
 	margin-bottom: 46px;
 	width: 78%;
 }

 .construction-looking .btn {
 	font-size: 26px;
 	color: #ffffff;
 	font-weight: bold;
 	padding: 21px 49px;
 	text-align: center;
 	background-color: #F81D2D;
 }

 .construction-looking .btn:hover {
 	background: white;
  color: #F81D2D;
  border-radius: 3px solid #F81D2D;
  box-shadow: 0 0 0 2px white, 0 0 0 3px #F81D2D;
 }

 /*-- construction-looking end --*/


 /*-- testimonials start --*/
 .testimonials {
    height: 55vh;
    display: flex;
    align-items: center;
    background-color:#B3B3B3;
    font-family: 'Open Sans'
}

#demo {
    background:#B3B3B3;
    max-width: 1100px;
    margin: auto
}

.carousel-caption {
	background-color: #B3B3B3;
    position: initial;
    z-index: 10;
    padding: 5rem 8rem;
    color: rgba(78, 77, 77, 0.856);
    text-align: center;
    font-size: 1.2rem;
    font-style: italic;
    font-weight: bold;
    line-height: 2rem
}

@media(max-width:767px) {
    .carousel-caption {
        position: initial;
        z-index: 10;
        padding: 3rem 2rem;
        color: rgba(78, 77, 77, 0.856);
        text-align: center;
        font-size: 0.7rem;
        font-style: italic;
        font-weight: bold;
        line-height: 1.5rem
    }
}

.carousel-caption img {
    width: 10rem;
    border-radius: 5rem;
    margin-top: 2rem
}

@media(max-width:767px) {
    .carousel-caption img {
        width: 4rem;
        border-radius: 4rem;
        margin-top: 1rem
    }
}

#image-caption {
    font-style: normal;
    font-size: 1rem;
    margin-top: 0.5rem
}

@media(max-width:767px) {
    #image-caption {
        font-style: normal;
        font-size: 0.6rem;
        margin-top: 0.5rem
    }
}

i {

    color: #F81D2D;
    background-color:transparent;
    padding: 1.4rem
}

i.fas.fa-chevron-left {
    font-size: 30px;
    background-color:transparent;
}

i.fas.fa-chevron-right {
    font-size: 30px;
    background-color:transparent;
}
}

@media(max-width:767px) {
    i {
        padding: 0.8rem
    }
}

.carousel-control-prev {
    justify-content: flex-start
}

.carousel-control-next {
    justify-content: flex-end
}

.carousel-control-prev,
.carousel-control-next {
    transition: none;
    opacity: unset
}
 /*-- testimonials end --*/

 /*-- contact-us start --*/
 .contact-us {
 	background-color: white;
 	background-repeat: no-repeat;
 	background-size: cover;
 	width: 100%;
 	height: auto;
 	position: relative;
 }

 .contact-heading{
 	align-items: center;
 }

 .contact-us .contact-us-inner {
 	padding-top: 94px;
 	padding-bottom: 130px;
 }




 .button {
  background-color: #F81D2D; /* Green */
  border: none;
  color: white;
  padding: 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}



/*contact us form start*/


 /*custom font*/



/*form styles*/
#msform {
	margin-left: 10%;
	width: 500px;
    height: auto;
	text-align: center;
	position: relative;
}
#msform fieldset {
	background: white;
	border: 0 none;
	box-shadow: 0 0 5px 1px rgba(192, 25, 25, 1);
	padding: 20px 30px;
	box-sizing: border-box;
	width: 80%;
    height: 100%;
	margin: 0% 0% 0% 5%;
	
	/*stacking fieldsets above each other*/
	position: relative;
}
/*Hide all except first fieldset*/
#msform fieldset:not(:first-of-type) {
	display: none;
}

#msform fieldset:hover{

    box-shadow: 0 0 5px 1px rgb(0,0,0,1);
    transition: 0.7s;

}





/*final invoice page*/


 .body-mainn {
     background: #ffffff;
     border: 2px solid #F81D2D;
     margin-top: 30px;
     margin-bottom: 30px;
     padding: 40px 30px !important;
     position: relative;
     box-shadow: 0 1px 21px #808080;
     font-size: 10px
 }

 @media print {
    .body-mainn{
        width: 21cm;
        height: auto;
        margin-top: 30mm;
        margin-bottom: 30px; 
        /* change the margins as you want them to be. */
   } 
}

 .main thead {
     background: #1E1F23;
     color: #fff
 }

 .img {
     height: 100px
 }

 h1 {
     text-align: center
 }










/*inputs*/
#msform input, #msform textarea {
	padding: 12px;
	border: 0px solid #ccc;
	border-radius: 3px;
	margin-bottom: 10px;
	width: 100%;
	box-sizing: border-box;
	font-family: montserrat;
	color: #2C3E50;
	font-size: 13px;
  background-color: #E0E0E0;
}


/*buttons*/
#msform .action-button {
	width: 190px;
	background: #F81D2D;
	font-weight: bold;
    font-size: 18px;
	color: white;
	border: 0 none;
	border-radius: 30px;
	cursor: pointer;
	padding: 18px 5px;
	margin: 10px 5px;
    transition: 0.7s;
}
#msform .action-button:hover, #msform .action-button:focus {
	box-shadow: 0 0 0 2px white, 0 0 0 3px #F81D2D;
   background-color: white;
   color: #F81D2D;
}

/*gallery two button*/
.button1 {
  width: 200px;
  background: #F81D2D;
  font-weight: bold;
  color: white;
  border: 0 none;
  border-radius: 30px;
  cursor: pointer;
  padding: 18px 5px;
  margin: 10px 5px;
    transition: 0.7s;
}
.button:hover, .button1:focus {
  box-shadow: 0 0 0 2px white, 0 0 0 3px #F81D2D;
  background-color: white;
  color: #F81D2D;
}

/*button confirm order*/


.buttonconfirmorder{

  width: 200px;
  background: #F81D2D;
  font-weight: bold;
  color: white;
  border: 0 none;
  border-radius: 30px;
  cursor: pointer;
  padding: 10px 5px;
  margin-left: 240px;
    transition: 0.7s;
  }

.buttonconfirmorder:hover, .buttonconfirmorder:focus {
  box-shadow: 0 0 0 2px white, 0 0 0 3px #F81D2D;
  background-color: white;
  color: #F81D2D;
}


/*button Email Invoice*/


.buttonemailinvoice{

  width: 200px;
  background: #F81D2D;
  font-weight: bold;
  color: white;
  border: 0 none;
  border-radius: 30px;
  cursor: pointer;
  padding: 10px 5px;
  margin-top: 0px;
  margin-left: 30%;
  margin-right: 30%;
    transition: 0.7s;
  }

.buttonemailinvoice:hover, .buttonemailinvoice:focus {
  box-shadow: 0 0 0 2px white, 0 0 0 3px #F81D2D;
  background-color: white;
  color: #F81D2D;
}

/*modal form design*/

#msform .modalformbutton {
  width: 120px;
  background: #F81D2D;
  font-weight: bold;
  color: white;
  border: 0 none;
  border-radius: 30px;
  cursor: pointer;
  padding: 10px 5px;
  margin: 5px 5px;
    transition: 0.7s;
}
#msform .modalformbutton:hover, #msform .modalformbutton:focus {
  box-shadow: 0 0 0 2px white, 0 0 0 3px #F81D2D;
   background-color: white;
   color: #F81D2D;
}

.modal-header{
  background-color: #6c757d;
  color: white;
}

.success-message{
  width: 100%;
  height: 400px;
  margin-top: 100px;
  background-image: url("../images/success_dribbble_gif.gif");
}

.success-message h1{
  text-align: center;
  font-size: 40px;
  font-weight: 900;
  color: green;
  font-family: "Andada", Sans-serif;
}

.success-message h3{
  text-align: center;
  font-size: 20px;
  font-weight: 800;
  color: black;
  font-family: inherit;
}


.buttonemailnoservices{
  width: 120px;
  margin-left: 180px;
  background: #F81D2D;
  font-weight: bold;
  color: white;
  border: 0 none;
  border-radius: 30px;
  cursor: pointer;
  padding: 10px 5px;
    transition: 0.7s;
}

.buttonemailnoservices:hover, .buttonemailnoservices:focus {
  box-shadow: 0 0 0 2px white, 0 0 0 3px #F81D2D;
  background-color: white;
  color: #F81D2D;
}


/*read more button*/

.buttonreadmore
{
  width: 120px;
  background: #F81D2D;
  font-weight: bold;
  color: white;
  border: 0 none;
  border-radius: 10px;
  cursor: pointer;
  padding: 10px 5px;
  margin: 10px 5px;
    transition: 0.7s;
}

.buttonreadmore:hover, .buttonreadmore:focus {
  box-shadow: 0 0 0 2px white, 0 0 0 3px #F81D2D;
  background-color: white;
  color: #F81D2D;
}

.buttonservic-page {
 width: 200px;
  background: #F81D2D;
  font-weight: bold;
  color: white;
  border: 0 none;
  border-radius: 30px;
  cursor: pointer;
  padding: 12px 5px;
  margin: 10px 5px;
    transition: 0.7s;
}




/*headings*/
.fs-title {
	font-size: 15px;
	text-transform: uppercase;
	color: #2C3E50;
	margin-bottom: 10px;
}
.fs-subtitle {
	font-weight: normal;
	font-size: 13px;
	color: #666;
	margin-bottom: 20px;
}


/*contact us form end*/

/*google map*/

.map-container{
overflow:hidden;
padding-bottom:56.25%;
position:relative;
height:0;
}
.map-container iframe{
margin-left: 10%;
margin-top: 15%;
left:0;
top:0;
height:90%;
width:90%;
position:absolute;
}


/*contact us box*/


.our-team-main
{

	width:90%;
	height:100%;
	border-top:3px #F81D2D solid;
	border-bottom: 3px #F81D2D solid;
	background:#fff;
	text-align:center;
	border-radius:10px;
	overflow:hidden;
	position:relative;
	transition:0.7s;
	margin-bottom:20px;

}


.our-team-main i
{

	margin-bottom:30px;
  background-color:#F81D2D;
  color: white;
  border-radius: 50%;
  transition: 0.8s;
}

.our-team-main i:hover{
  background-color: white;
  color: #F81D2D;

}

i.far.fa-envelope {
    font-size: 30px;
}

i.fas.fa-phone-alt{
 font-size: 30px;
}

i.fas.fa-map-marker-alt {
  font-size: 30px;
}

.our-team-main h3
{
  font-family: "Poppins", Sans-serif;
	font-size:22px;
	font-weight:700;
}

.our-team-main p
{
	margin-top:15px;
  font-size: 16px;
  font-family: "Poppins", Sans-serif;
  letter-spacing: 0.2px;
  font-weight:200;
  line-height: 10px;
}

/*.team-back
{
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	padding:5px 15px 0 15px;
	text-align:left;
	background:grey;
	
} */

.team-front
{
	width:100%;
	height:200px;

	position:relative;
	z-index:10;
	background:#fff;
	padding:15px;
	bottom:0px;
	transition: all 0.5s ease;
}

/*our-team-main*/


.box .space { height: 30px; }

 /*-- contact-us end --*/

 /*-- footer start --*/

/* Footer */
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
section {
    padding: 60px 0;
}

.section-title {
    text-align: center;
    color: #007b5e;
    margin-bottom: 50px;
    text-transform: uppercase;
}

#footer {
  width: 100%;
    background: #757575 !important;
    display: inline-block;
}

.contact-us-quick-link{

  float:left;
  margin-left: 30px;

  height: 200px;
}

.footer-brand-logo{
  float: left;
  margin-left: 350px;
  height: 200px;
}

.footer-brand-logo a{
  list-style: none;
  display: inline-block;
}

.contact-us-info{
  float: left;
  margin-left: 300px;

  height: 200px;
}

.contact-us-quick-link p{
  font-family:  "Poppins", Sans-serif;
  color: white;
  font-weight: 200;

}

.contact-us-info p{
  font-family:  "Poppins", Sans-serif;
  color: white;
  text-align: right;
    font-weight: 200;

}

#footer .contact-us-quick-link h5{

  font-size: 25px;
  padding-left: 15px;
    padding-bottom: 6px;
    margin-bottom: 20px;
    color:#ffffff;
}

#footer .contact-us-info h5{

text-align: right;
  font-size: 25px;
    margin-bottom: 20px;
    color:#ffffff;
}

#footer a {
    color: #ffffff;
    text-decoration: none !important;
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
}

#footer .list-unstyled {
    padding-left: 15px;
    list-style: none;
}


/* footer social icons */
ul.social-network {
  list-style: none;
  display: inline;
  padding: 0px;
}
ul.social-network li {
  display: inline;
  margin-left: 55px;

}


/* footer social icons */
.social-network a.icofacebook:hover {
  background-color: #000000 ;
}
.social-network a.icoyoutube:hover {
  background-color:#3B5998;
}
.social-network a.icoinstagram:hover {
  background-color:#33ccff;
}

.social-network a.icoRss:hover i, .social-network a.icoFacebook:hover i, .social-network a.icoTwitter:hover i,
.social-network a.icoGoogle:hover i, .social-network a.icoVimeo:hover i, .social-network a.icoLinkedin:hover i {
  color:#fff;
}
a.socialIcon:hover, .socialHoverClass {
  color:#44BCDD;
}

.social-circle li a {
  display:inline-block;
  position:relative;
  margin:0 auto 0 auto;
  -moz-border-radius:50%;
  -webkit-border-radius:50%;
  border-radius:50%;
  text-align:center;
  width: 60px;
  height: 60px;
  font-size:30px;
}
.social-circle li i {
  margin:0;
  line-height:50px;
  text-align: center;
}

.social-circle li a:hover i, .triggeredHover {
  -moz-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  -ms--transform: rotate(360deg);
  transform: rotate(360deg);
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  -ms-transition: all 0.2s;
  transition: all 0.2s;
}
.social-circle i {
  color: #fff;
  -webkit-transition: all 0.8s;
  -moz-transition: all 0.8s;
  -o-transition: all 0.8s;
  -ms-transition: all 0.8s;
  transition: all 0.8s;
}

.social-circle h3{
  margin-left: 110px;
  margin-top: 20px;
  font-weight: 700;
  color: white;
  font-size: 28px;
}



}

footer {
  background-color: black;
  width: 100%;
  height:100px;
  color: white
}

footer a{
  color: white;
}

footer a{
  color: white;
}



 /*-- footer end --*/


 /*project carousal start*/


 /*project carousal end*/

 /*-- top to bottom-button*/


 footer .fa-arrow-up {
 	margin: 10px;
 	position: absolute;
 	bottom: 0px;
 	left: 5px;
 	top: 5px;
 	font-size: 20px;
 	transition: 0.7s;
 }

 footer .fa-arrow-up:hover {
 	top: 0;
 }

 #myBtn {
 	/* background-image: url('../images/banner-1.jpg');
      background-repeat: no-repeat;*/
 	display: none;
 	position: fixed;
 	bottom: 20px;
 	right: 30px;
 	z-index: 99;
 	font-size: 18px;
 	border: none;
 	outline: none;
 	background-color: #F81D2D;
 	color: white;
 	cursor: pointer;
 	padding: 10px;
 	border-radius: 25%;
 	width: 45px;
 	height: 45px;
 	transition: 0.7s;
 }

 

 button#myBtn {
    background-color: transparent;
}


 .copyright-part{
  background-color: black;
  color: white;
 }




 /* product tables*/
 .col-md-6.col-md-offset-3.body-main {
    margin-top: 30px;
}

.col-md-6.body-main{
  margin-bottom: 50px;
}

td.col-md-4 {
    font-size: 13px;
}

tr {
    font-size: 13px;
}

.col-md-12 .socialbutton{
  padding: 0px;
}




 /*==================
                 media query start 
               ===================*/


      @media print {
  #printbutton {
    display: none;
  }
}



     @media only screen and (max-width: 1920px) {

.social-circle h3{
  margin-left: 120px;
  margin-top: 20px;
  font-weight: 700;
  color: white;
  font-size: 28px;
}

.socialbuttonleft {
    margin-left: 140px;
}

ul.social-network li {
    display: inline;
    margin-left: -10px;
}

  .contact-us-quick-link{

  float:left;
  margin-left: 30px;

  height: 200px;
}

.footer-brand-logo{
  float: left;
  margin-left: 350px;

  height: 200px;
}

.footer-brand-logo a{
  list-style: none;
  display: inline-block;
}

.contact-us-info{
  float: left;
  margin-left: 300px;

  height: 200px;
}

                }


 @media only screen and (max-width: 1440px) {
 	.container {
 		max-width: 1300px;
 	}

 	header .navbar-expand-lg {
 		padding: 18px 30px;
 	}

 	.banner .banner-inner {
 		padding-top: 240px;
 		padding-bottom: 170px;
 	}

 	.banner .banner-inner h1 {
 		font-size: 40px;
 		width: 85%;
 	}

 	.banner .banner-inner .btn {
 		font-size: 20px;
 		padding: 22px 45px;
 	}

 	.construction-team-inner {
 		margin-top: 15px;
 	}

 	.construction-team .thumbnail img {
 		max-width: 100%;
 		width: 100%;
 		margin-left: -85px;
 	}

 	.testimonials .testimonials-content:first-child {
 		margin-bottom: 50px;
 	}

 	.testimonials .testimonials-inner .thumbnail img {
 		height: 650px;
 		width: 100%;
 		position: relative;
 		right: -85px;
 		object-fit: cover;
 	}

 	.carousel-inner .text {
 		margin-top: 15px;
 		margin-bottom: 20px;
 	}

 	.carousel-inner p {
 		font-size: 17px;
 		line-height: 28px;
 	}

 	.portfolio a {
 		font-size: 17px;
 		padding: 6px 35px;
 	}

 	.testimonials-content p {
 		font-size: 20px;
 		line-height: 32px;
 		width: 90%;
 	}

 	.testimonials-content img {
 		width: 100%;
 		height: 100%;
 	}

 	.carousel-inner h3 {
 		margin: 10px 0;
 	}

 	.testimonials-content {
 		width: 100%;
 	}

 	.contact-us .form-group:first-child .form-control {
 		width: 390px;
 	}

 	.construction-looking {
 		background-position: center;
 	}

 	.owl-test .owl-item .item {
 		padding-right: 40px;
 	}
 }






 @media only screen and (max-width: 1366px) {


  @import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
section {
   
}

.socialbuttonleft {
    margin-left: 120px;
}

tr {
    font-size: 16px;
}

td.col-md-4 {
    font-size: 16px;
}

.body-mainn {
     background: #ffffff;
     width: 21cm;
     height: 29.7cm;
     border: 2px solid #F81D2D;
     margin-top: 30px;
     margin-bottom: 30px;
     padding: 40px 30px !important;
     position: relative;
     box-shadow: 0 1px 21px #808080;
 }

 .main thead {
     background: #1E1F23;
     color: #fff
 }

 .img {
     height: 100px
 }

 .body-mainn h1 {
     text-align: center;
 }

 .body-mainn p{
  font-size: 13px;
 }





/* footer social icons */
ul.social-network {
  list-style: none;
  display: inline;
  padding: 10px;
}

/* footer social icons */
.social-network a.icofacebook:hover {
  background-color: #000000 ;
}
.social-network a.icoyoutube:hover {
  background-color:#3B5998;
}
.social-network a.icoinstagram:hover {
  background-color:#33ccff;
}

.social-network a.icoRss:hover i, .social-network a.icoFacebook:hover i, .social-network a.icoTwitter:hover i,
.social-network a.icoGoogle:hover i, .social-network a.icoVimeo:hover i, .social-network a.icoLinkedin:hover i {
  color:#fff;
}
a.socialIcon:hover, .socialHoverClass {
  color:#44BCDD;
}

.social-circle li a {
  display:inline-block;
  position:relative;
  margin:0 auto 0 auto;
  -moz-border-radius:50%;
  -webkit-border-radius:50%;
  border-radius:50%;
  text-align:center;
  width: 40px;
  height: 40px;
  font-size:20px;
}
.social-circle li i {
  margin:0;
  line-height:20px;
  text-align: center;
}

ul.social-network li {
    display: inline;
    margin-left: 0px;
}

.social-circle li a:hover i, .triggeredHover {
  -moz-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  -ms--transform: rotate(360deg);
  transform: rotate(360deg);
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  -ms-transition: all 0.2s;
  transition: all 0.2s;
}
.social-circle i {
  color: #fff;
  -webkit-transition: all 0.8s;
  -moz-transition: all 0.8s;
  -o-transition: all 0.8s;
  -ms-transition: all 0.8s;
  transition: all 0.8s;
}

.social-circle h3{
  margin-left: 120px;
  margin-top: 20px;
  font-weight: 700;
  color: white;
  font-size: 28px;
}

.jumbotron {
  color: white;
  background-color: #B0BEC5; 
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 30vh;
}

.display-4 {
  text-align: center;
  font-size: 40px;
  margin-top: 50px;
  font-weight: 500;
}


.section-title {
    text-align: center;
    color: #007b5e;
    margin-bottom: 50px;
    text-transform: uppercase;
}
#footer {
  width: 100%;
    background: #757575 !important;
    display: inline-block;
}

.contact-us-quick-link{

  float:left;
  margin-left: 40px;
  height: 250px;
}

.footer-brand-logo{
  float: left;
  height: 250px;
}

.logo1366{margin-left: 450px; important }

.contact-us-info{
  float: right;
  height: 250px;
}

.contact-us-quick-link p{
  font-family:  "Poppins", Sans-serif;
  color: white;
  font-weight: 200;

}

.contact-us-info p{
  font-family:  "Poppins", Sans-serif;
  color: white;
  text-align: right;
    font-weight: 200;

}

#footer .contact-us-quick-link h5{

  font-size: 25px;
    padding-bottom: 6px;
    margin-bottom: 20px;
    color:#ffffff;
}

#footer .contact-us-info h5{

text-align: right;
  font-size: 25px;
    margin-bottom: 20px;
    color:#ffffff;
}

#footer a {
    color: #ffffff;
    text-decoration: none !important;
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
}

#footer ul.social li a i{

  -webkit-transition: .5s all ease;
  -moz-transition: .5s all ease;
  transition: .5s all ease;
}
#footer ul.social li a:hover{
  color:#eeeeee;
}


}

 /*-- footer end --*/


 /*project carousal start*/


 /*project carousal end*/

 /*-- top to bottom-button*/

 html {
  scroll-behavior: smooth;
 }

 footer .fa-arrow-up {
  margin: 10px;
  position: absolute;
  bottom: 0px;
  left: 5px;
  top: 5px;
  font-size: 20px;
  transition: 0.7s;
 }

 footer .fa-arrow-up:hover {
  top: 0;
 }

 #myBtn {
  /* background-image: url('../images/banner-1.jpg');
      background-repeat: no-repeat;*/
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: #F81D2D;
  color: white;
  cursor: pointer;
  padding: 10px;
  border-radius: 25%;
  width: 45px;
  height: 45px;
  transition: 0.7s;
 }

 

 button#myBtn {
    background-color: transparent;
}


.testimonials {
    height: auto;
    display: flex;
    align-items: center;
    background-color:#B3B3B3;
    font-family: 'Open Sans'
}


  header {
  position: fixed;
  width: 100%;
  z-index: 99;
  margin-top: 0px;
  transition: 0.7s;
 }

 header .navbar .nav-item .nav-link {
  font-size: 16x;
  font-weight: bold;
  text-transform: uppercase;
  transition: all 0.7s ease;
  color: white;
  padding: 0px 5px 10px 30px ;
 }

 header .navbar .nav-item .nav-link:hover {
  color: white;
 }

 .navbar-toggler {

  background-color: #F81D2D;
}

.navbar-fixed-top.scrolled {
  background-color: #7A7A7A !important;
  transition: background-color 200ms linear;
}


ul.navbar-nav {
    margin-left: 600px;
}



.dropbtn {

  background-color: #4CAF50;
  color: white;
  border: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {

  margin-top: 2px;
  display: none;
  position: absolute;
  font-size: 14px;
  background-color: grey;
  width: 480px;
  height: 150px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  font-family: Georgia, serif;
  color: white;
  padding-top: 10px;
  padding-bottom:10px;
  padding-right: 10px;
  padding-left: 15;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {color:#F81D2D;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: transparent;}




.dropbtn2 {

  background-color: #4CAF50;
  color: white;
  border: none;
}

.dropdown-content2 {
  margin-top: 2px;
  display: none;
  position: absolute;
  font-size: 13px;
  background-color: grey;
  width: 350px;
  height: 110px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content2 a {
  font-family: Georgia, serif;
  color: white;
  padding-top: 10px;
  padding-bottom:10px;
  padding-right: 5px;
  padding-left: 5;
  text-decoration: none;
  display: inline-block;
}

.dropdown-content2 a:hover {color:#F81D2D;}

.dropdown:hover .dropdown-content2 {display: block;}

.dropdown:hover .dropbtn2 {background-color: transparent;}


}



}
  


 }

 @media only screen and (max-width: 1024px) {
 	.container {
 		max-width: 100%;
 	}

 	header {
 		margin-top: 20px;
 	}

 	header .navbar .nav-item .nav-link {
 		font-size: 15px;
 		padding: 0 12px;
 	}

 	.banner {
 		background-position: center;
 	}

 	.banner .banner-inner h1 {
 		font-size: 36px;
 		width: 100%;
 	}

 	.banner .banner-inner .btn {
 		font-size: 18px;
 		padding: 20px 40px;
 	}

 	.counting-inner-content {
 		padding: 45px;
 	}

 	.counting-inner .count-title {
 		font-size: 40px;
 	}

 	.counting-inner .count-text {
 		font-size: 18px;
 		line-height: 22px;
 	}

 	.counting {
 		margin: 70px 0;
 	}

 	.services .services-content h2 {
 		font-size: 40px;
 		margin-bottom: 35px;
 	}

 	.services .services-content p {
 		font-size: 17px;
 		line-height: 30px;
 		margin-right: 0;
 	}

 	.owl-services-content h4 a {
 		font-size: 24px;
 	}

 	.portfolio h2 {
 		font-size: 40px;
 	}

 	.owl-services-content p {
 		font-size: 17px;
 		line-height: 30px;
 	}

 	.carousel-inner figure {
 		height: 460px;
 	}

 	.portfolio .carousel-indicators {
 		bottom: -22%;
 	}

 	.construction-team h3 {
 		font-size: 40px;
 	}

 	.services .services-content {
 		width: 100%;
 	}

 	.construction-team {
 		margin-bottom: 80px;
 	}

 	.nogap > .col {
 		padding-left: 20px;
 		padding-right: 20px;
 	}

 	.construction-team .card-body .card-title {
 		font-size: 21px;
 	}

 	.construction-team .card-body .card-text {
 		font-size: 18px;
 		margin-bottom: 15px;
 	}

 	.construction-team .card-body {
 		padding: 20px 0 30px 0;
 	}

 	.construction-team span i {
 		font-size: 25px;
 		margin-right: 15px;
 	}

 	.construction-team .controls-bottom {
 		margin-top: 25px;
 		margin-bottom: 35px;
 	}

 	.looking-innar {
 		padding: 80px 0;
 	}

 	.construction-looking h2 {
 		font-size: 35px;
 		margin-bottom: 20px;
 	}

 	.construction-looking p {
 		line-height: 30px;
 		margin-bottom: 40px;
 		width: 100%;
 	}

 	.construction-looking .btn {
 		font-size: 20px;
 		padding: 15px 30px;
 	}

 	.testimonials {
 		margin: 90px 0;
 	}

 	.testimonials .testimonials-inner h2 {
 		font-size: 40px;
 		margin-bottom: 15px;
 	}

 	.testimonials .testimonials-inner p {
 		font-size: 17px;
 		line-height: 30px;
 		margin-bottom: 35px;
 		width: 100%;
 	}

 	.testimonials .testimonials-content .content {
 		padding-left: 25px;
 	}

 	.testimonials .testimonials-inner p {
 		font-size: 17px;
 		line-height: 28px;
 		margin-bottom: 30px;
 	}

 	.testimonials .testimonials-inner .thumbnail figure {
 		margin-bottom: 0;
 		width: 100%;
 		height: 100%;
 	}

 	.testimonials .testimonials-inner .thumbnail img {
 		height: 100%;
 		right: 0;
 	}

 	.construction-team .thumbnail img {
 		margin-left: 0;
 		height: 100%;
 	}

 	.contact-us h3 {
 		font-size: 40px;
 	}

 	.contact-us h4 {
 		font-size: 40px;
 	}

 	.contact-us p,
 	a {
 		font-size: 20px;
 	}

 	.contact-us .form-group:first-child .form-control {
 		width: 310px;
 	}

 	.contact-us .contact-us-inner {
 		padding: 90px 0;
 	}

 	.contact-us form .btn {
 		font-size: 20px;
 		padding: 15px 30px;
 	}

 	footer {
 		padding: 50px 0;
 	}

 	footer ul li a {
 		padding: 0 15px;
 	}
 }


 @media only screen and (max-width: 814px) {
 	header .navbar .navbar-nav {
 		margin-top: 15px;
 	}

 	header .navbar-expand-lg {
 		padding: 15px;
 	}

 	header .navbar .nav-item .nav-link {
 		padding: 1px 0;
 	}


 	header .navbar-nav .nav-item:hover {
 		background-color: #b379319e;
 	}


 	/*
 	header .navbar .nav-item .nav-link:hover {
 		background-color: #0000ff;
 	}
*/

 	.banner .banner-inner {
 		padding-bottom: 120px;
 	}

 	.banner .banner-inner h1 {
 		font-size: 33px;
 	}

 	.counting-inner-content .counter {
 		width: 100%;
 	}

 	.banner .banner-inner .btn {
 		font-size: 15px;
 		padding: 15px 30px;
 	}

 	.services .services-content p {
 		line-height: 28px;
 	}

 	.services .services-content h2 {
 		font-size: 35px;
 		margin-bottom: 30px;
 	}

 	.portfolio h2 {
 		font-size: 35px;
 	}

 	.Gallary {
 		padding-top: 40px;
 	}

 	.carousel-inner .content-2 {
 		padding-left: 0;
 	}

 	.carousel-inner .text {
 		margin-top: 20px;
 		margin-bottom: 25px;
 	}

 	.carousel-inner .content-1 {
 		padding-right: 0;
 		margin-bottom: 20px;
 	}

 	.carousel-inner figure {
 		height: 100%;
 	}

 	.portfolio .carousel-indicators {
 		bottom: -10%;
 	}

 	.construction-team h3 {
 		font-size: 26px;
 		margin-bottom: 10px;
 	}

 	.construction-team .thumbnail {
 		margin-bottom: 20px;
 	}

 	.construction-team p {
 		font-size: 17px;
 		line-height: 28px;
 	}

 	.construction-looking p {
 		width: 80%;
 	}

 	.testimonials .testimonials-inner h2 {
 		font-size: 30px;
 		margin-bottom: 10px;
 	}

 	.testimonials .testimonials-inner .thumbnail {
 		display: none;
 	}

 	.testimonials {
 		margin: 70px 0;
 	}

 	.contact-us .block {
 		margin-bottom: 50px;
 	}

 	.contact-us h4 {
 		font-size: 35px;
 	}

 	.contact-us .form-group:first-child .form-control {
 		width: 100%;
 	}

 	footer ul li a,
 	span {
 		font-size: 18px;
 	}
 }

 @media only screen and (max-width: 640px) {
 	.owl-test .owl-item .item {
 		padding-left: 20px;
 		padding-right: 20px;
 	}

 	footer ul li {
 		display: block;
 	}

 	footer ul span {
 		display: none;
 	}

 	footer .navbar-nav {
 		margin-bottom: 30px;
 	}
 }

 @media only screen and (max-width: 480px) {
 	header .navbar-expand-lg {
 		padding: 15px 0;
 	}

 	header {
 		margin-top: 0;
 		background-color: #ffffff;
 	}


 	header .navbar-brand img {
 		max-width: 80%;
 	}

 	.banner {
 		text-align: center;
 	}

 	.banner .banner-inner {
 		padding-top: 200px;
 		padding-bottom: 100px;
 	}

 	.banner .banner-inner h1 {
 		font-size: 27px;
 	}

 	.counting-inner-content {
 		display: block;
 		padding: 35px;
 	}

 	.counting-inner-content .counter {
 		margin-bottom: 30px;
 	}

 	.services .services-content h2 {
 		font-size: 27px;
 		margin-bottom: 20px;
 	}

 	.services .services-content p {
 		margin-bottom: 30px;
 	}

 	.services-carousel .owl-services {
 		text-align: center;
 	}

 	.owl-test .owl-item .item {
 		padding-left: 20px;
 		padding-right: 20px;
 	}

 	.portfolio {
 		padding-bottom: 150px;
 	}

 	.portfolio h2 {
 		font-size: 21px;
 	}

 	.Gallary {
 		text-align: center;
 	}

 	.carousel-inner h3 {
 		font-size: 24px;
 	}

 	.carousel-inner p {
 		font-size: 16px;
 		line-height: 28px;
 	}

 	.portfolio .carousel-indicators {
 		bottom: -12%;
 	}

 	.nogap > .col {
 		padding-left: 15px;
 		padding-right: 15px;
 	}

 	.construction-team {
 		margin-bottom: 50px;
 	}

 	.construction-team .card-body .card-title {
 		font-size: 19px;
 	}

 	.looking-innar {
 		padding: 60px 0;
 	}

 	.construction-looking h2 {
 		font-size: 25px;
 		margin-bottom: 20px;
 	}

 	.construction-looking p {
 		font-size: 17px;
 		line-height: 28px;
 		width: 100%;
 	}

 	.testimonials .testimonials-content .content {
 		padding-left: 15px;
 	}

 	.testimonials-content span {
 		font-size: 20px;
 	}

 	.testimonials-content h6 {
 		font-size: 15px;
 	}

 	.testimonials {
 		margin: 60px 0;
 	}

 	.contact-us h3 {
 		font-size: 35px;
 		margin-bottom: 15px;
 	}

 	.contact-us h4 {
 		margin-bottom: 10px;
 	}

 	.contact-us .form-group:first-child .form-control {
 		margin-top: 20px;
 	}

 	footer p {
 		line-height: 28px;
 	}
 }

 @media only screen and (max-width: 375px) {
 	header .navbar-brand {
 		margin-right: 0;
 	}

 	header .navbar-brand img {
 		max-width: 70%;
 	}

 	.banner .banner-inner {
 		padding-top: 150px;
 		padding-bottom: 80px;
 	}

 	.banner .banner-inner h1 {
 		font-size: 23px;
 	}

 	.counting {
 		margin: 50px 0;
 	}

 	.services .services-content h2 {
 		font-size: 22px;
 		margin-bottom: 20px;
 	}

 	.services .services-content p {
 		margin-bottom: 20px;
 		font-size: 15px;
 		line-height: 27px;
 	}

 	.owl-services-content {
 		margin-top: 15px;
 	}

 	.owl-services-content p {
 		font-size: 15px;
 		line-height: 25px;
 	}

 	.owl-services-content h4 {
 		margin-bottom: 3px;
 	}

 	.owl-services-content h4 a {
 		font-size: 22px;
 	}

 	.owl-dots {
 		margin-top: 8%;
 	}

 	.owl-carousel .owl-nav button.owl-next,
 	.owl-carousel .owl-nav button.owl-prev,
 	.owl-carousel button.owl-dot {
 		width: 18px;
 		height: 18px;
 		margin-right: 2px;
 	}

 	.carousel-inner h3 {
 		font-size: 20px;
 	}

 	.carousel-inner p {
 		font-size: 15px;
 		line-height: 26px;
 	}

 	.portfolio a {
 		font-size: 15px;
 		padding: 5px 30px;
 	}

 	.carousel-indicators li {
 		background-color: #cccccc;
 		width: 18px;
 		height: 18px;
 	}

 	.portfolio {
 		padding-bottom: 110px;
 	}

 	.construction-team h3 {
 		font-size: 23px;
 	}

 	.construction-team p {
 		font-size: 15px;
 		line-height: 26px;
 	}

 	.construction-team .card-body .card-title {
 		font-size: 17px;
 	}

 	.construction-team .card-body .card-text {
 		font-size: 15px;
 		margin-bottom: 10px;
 	}

 	.construction-team span i {
 		font-size: 20px;
 		margin-right: 10px;
 	}

 	.construction-team .card-body {
 		padding: 20px 0;
 	}

 	.construction-team .controls-bottom a {
 		width: 35px;
 		height: 35px;
 		padding: 2px 5px;
 	}

 	.construction-team .controls-bottom i {
 		font-size: 25px;
 	}

 	.construction-team .controls-bottom {
 		margin-top: 20px;
 		margin-bottom: 0px;
 	}

 	.construction-looking h2 {
 		font-size: 18px;
 		margin-bottom: 15px;
 	}

 	.construction-looking p {
 		font-size: 15px;
 		line-height: 25px;
 		margin-bottom: 30px;
 	}

 	.construction-looking .btn {
 		font-size: 15px;
 		padding: 15px 20px;
 	}

 	.testimonials .testimonials-inner h2 {
 		font-size: 25px;
 		margin-bottom: 10px;
 	}

 	.testimonials .testimonials-inner p {
 		font-size: 15px;
 		line-height: 25px;
 	}

 	.testimonials-content span {
 		font-size: 19px;
 	}

 	.testimonials-content h6 {
 		font-size: 14px;
 	}

 	

 	.contact-us h3 {
 		font-size: 30px;
 	}

 	.contact-us p,
 	a {
 		font-size: 18px;
 		line-height: 34px;
 	}

 	.contact-us h4 {
 		font-size: 30px;
 	}

 	.contact-us .form-group:first-child .form-control {
 		padding: 25px 10px;
 	}

 	.contact-us form .btn {
 		font-size: 16px;
 		padding: 15px 25px;
 	}

 	footer .navbar-nav {
 		margin-bottom: 20px;
 	}
 }

 @media only screen and (max-width: 320px) {
 	header .navbar-expand-lg {
 		padding: 15px 5px;
 	}
 }



 /* Popup container - can be anything you want */
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* The actual popup */
.popup .popuptext {
  visibility: hidden;
  width: 280px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 12px;
  position: absolute;
  z-index: 1;
  bottom: 80%;
  left: -80%;
  margin-left: -80px;
  border:1px solid #F81D2D;
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Toggle this class - hide and show the popup */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}


/*------------------------Checkbox Design------------------------*/
.mains {
        display: block;
        position: relative;
        padding-left: 5px;
        margin-bottom: 0px;
        cursor: pointer;
        font-size: 12px;
        float: left; 
        padding-left: 6%; 
        padding-right: 3%;
      }
      h1 {
        color: orange;
      }
      /* Hiding the initial checkbox */
      input[type=checkbox] {
        visibility: hidden;
      }
      /* Creating a custom checkbox based on demand */
      .w3docs {
        position: absolute;
        top: 0;
        left: 0;
        height: 17px;
        width: 17px;
        background-color: black;
      }
      /* Specify the background color to be shown when hovering over checkbox */
      .mains:hover input ~ .w3docs {
        background-color: gray;
      }
      /* Specify the background color to be shown when checkbox is active */
      .mains input:active ~ .w3docs {
        background-color: white;
      }
      /* Specify the background color to be shown when checkbox is checked */
      .mains input:checked ~ .w3docs {
        background-color: #F81D2D;
      }
      /* Checkmark to be shown in checkbox */
      /* It is not be shown when not checked */
      .w3docs:after {
        content: "";
        position: absolute;
        display: none;
      }
      /* Display checkmark when checked */
      .mains input:checked ~ .w3docs:after {
        display: block;
      }
      /* Styling the checkmark using webkit */
      /* Rotated the rectangle by 45 degree and 
      showing only two border to make it look
      like a tickmark */
      .mains .w3docs:after {
        left: 6px;
        bottom: 5px;
        width: 4.5px;
        height: 10px;
        border: solid white;
        border-width: 0 2px 2px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
      }

/*---------------- Select Option Style --------------*/
.hdyku{
  width: 340px; 
  height: 40px; 
  font-size: 12px; 
  padding-left: 9px; 
  background-color: #E0E0E0; 
  border-radius: 3px; 
  border: 0px solid #ccc;
}

.fencwall{ 
  font-size: 15px; 
  padding-left: 9px; 
  background-color: #E0E0E0; 
  border-radius: 3px; 
  border: 0px solid #ccc;
}


#table_design {
      font-family: Arial, Helvetica, sans-serif;
      border-collapse: collapse;
      width: 100%;
    }

    #table_design td, #table_design th {
      border: 2px solid #ddd;
      padding: 8px;
    }

    #table_design tr:nth-child(even){background-color: #f2f2f2;}

    #table_design tr:hover {background-color: #ddd;}

    #table_design th {
      padding-top: 12px;
      padding-bottom: 12px;
      text-align: left;
      background-color: #cccccc;
      color: black;
    }
    #homeform{
        width:40%;
        margin-left:85%;  
    }
    #homeform .action-button {
	background: #F81D2D;
	font-weight: bold;
    font-size: 18px;
	color: white;
	border: 0 none;
	border-radius: 30px;
	cursor: pointer;
	padding: 10px 5px;
	margin: 20px 5px;
    transition: 0.7s;
    }
    #homeform fieldset:not(:first-of-type) {
    	display: none;
    }
    #homeform .action-button:hover, #homeform .action-button:focus {
    	box-shadow: 0 0 0 2px white, 0 0 0 3px #F81D2D;
       background-color: white;
       color: #F81D2D;
    }
    
@media only screen and (min-width: 601px){
    #homeform{
        display:none;
    }
    #checkoutform{
        display:none;
    }
}



    #checkoutform{
        width:4%;
        margin-left:50%;  
    }
    #checkoutform .action-button {
	background: #F81D2D;
	font-weight: bold;
    font-size: 18px;
	color: white;
	border: 0 none;
	border-radius: 30px;
	cursor: pointer;
	padding: 10px 5px;
	margin: 20px 5px;
    transition: 0.7s;
    }
    #checkoutform fieldset:not(:first-of-type) {
    	display: none;
    }
    #checkoutform .action-button:hover, #checkoutform .action-button:focus {
    	box-shadow: 0 0 0 2px white, 0 0 0 3px #F81D2D;
       background-color: white;
       color: #F81D2D;
    }  

/*---------------------------------- responsivness --------------------------------------*/
img {
  max-width: 100%;
  display: block;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

[class*="col-"] {
  float: left;
  /*padding: 15px;*/
}

/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}

@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}

/*------------------------------------- Start Header Responsiveness ---------------------------------*/
   

/*------------------------------------- End Header Responsiveness ---------------------------------*/
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .contact-us-quick-link {
    margin-left: -130px;
    margin-top:-30px;
    width: 100%;
    text-align: center;
    line-height: 90%;
  }
}
@media only screen and (max-width: 600px) {
  .quick-links {
    margin-top:-20px;
  }
}
@media only screen and (max-width: 600px) {
  .navbar {
    margin-left: auto;
    width: 100%;
    height: 100px;
  }
}
@media only screen and (max-width: 600px) {
  .navbar-brand-logo {
    margin-left: auto;
    width: 80%;
    height: 80px;
  }
}
@media only screen and (max-width: 400px) {
  .navbar-brand-logo {
    margin-left: auto;
    width: 80%;
    height: 80px;
  }
}
/*-------------------------------- Footer ----------------------------------*/
@media only screen and (max-width: 600px) {
  .footer-brand-logo {
    margin-left: -68px;
    margin-top:-100px;
    width: 100%;
  }
}
@media only screen and (max-width: 600px) {
  .socialbutton { 
    margin-top:-25px;
    margin-left:40px;
  }
  .socialbuttonleft{
      text-align:center;
  }
  .socialbuttonleft .icoyoutube{
      margin-left:-11px;
  }
  .socialbuttonleft .icoinstagram{
      margin-left:-2px;
  }
  .social-circle h3{
      font-size:22px;
  }
}
@media only screen and (max-width: 600px) {
  .contact-us-info {
    text-align: center;
    margin-top:-35px;
    margin-bottom:-125px;
    line-height: 90%;
    margin-left:250px;
  }
}
@media only screen and (max-width: 600px) {
  .contact-footer {
    margin-bottom:-10px;
  }
}
@media only screen and (max-width: 600px) {
  #footer .contact-us-info h5{
    text-align: center;
    font-size: 25px;
    margin-bottom: 20px;
    color:#ffffff;
    margin-left:-115%;
    }
}
@media only screen and (max-width: 600px) {
  .contactdetails{
    margin-left:-115%;
    }
}
@media only screen and (max-width: 600px) {
  .details{
    display: inline-block;
    text-align: center;
    }
}
@media only screen and (max-width: 600px) {
  .copyright{
        display: inline-block;
        text-align: center;
        font-size:14px;
        width:100%;
    }
    .copyright a{
        font-size:14px;
    }
}
@media only screen and (min-width: 601px) {
    .xxx{
        width:100%;
        padding-left:250px;
    }
    .yyy{
        width:100%;
        padding-right:195px;
    }
}
/*----------------------------------------- End footer ----------------------------------------*/
@media only screen and (max-width: 600px) {
  .row {
    margin-left: auto;
    width: 100%;
  }
}
@media only screen and (max-width: 600px) {
  #msform {
    margin-left: auto;
    margin-right: auto;
    width: 115%;
  }
}
@media only screen and (max-width: 600px) {
  .cart {
    width: 100%;
    margin-left:10%;
  }
}
@media only screen and (max-width: 600px) {
  .freequote {
    width: 65%;
    margin-left:27%;
  }
}
/*----------------------- Master Page Responsive -------------------------*/

@media only screen and (max-width: 600px) {
  #decks h4{
    font-size: 20px;
    }
}
@media only screen and (max-width: 600px) {
  #driveways h4{
    font-size: 20px;
    }
}
@media only screen and (max-width: 600px) {
  #fences h4{
    font-size: 20px;
    }
}
@media only screen and (max-width: 600px) {
  #retainingwalls h4{
    font-size: 20px;
    }
}
@media only screen and (max-width: 600px) {
  #qoutemessage h4{
    font-size: 20px;
    }
}
@media only screen and (max-width: 600px) {
  .homebtn {
    width:100%;
    float:left;
    }
    #homeform{
        width:20%; 
        margin-left:40%;
        
    }
    #checkoutform{
        width:20%; 
        margin-left:35%;
        
    }
}
/*----------------------- Cart PopUp Responsive -------------------------*/
@media only screen and (max-width: 600px) {
  .popup {
    position: relative;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
}
@media only screen and (max-width: 600px) {
    .popup .popuptext {
       width: 200px;    
    }
}
/* Popup arrow */
@media only screen and (max-width: 600px) {
    .popup .popuptext::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 71%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #555 transparent transparent transparent;
    }
}
/*-------------------------------- checkout page -----------------------------------*/
@media only screen and (max-width: 600px) {
  .hdyku {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }
}
@media only screen and (max-width: 600px) {
  .table {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }
}
@media only screen and (max-width: 600px) {
  .display-4 {
    font-size:30px;
    padding-top:35px;
  }
}
@media only screen and (max-width: 600px) {
  .dispaly1 {
    height:190px;
    margin-bottom:-22px;
  }
}
@media only screen and (max-width: 600px) {
  .jumbotron1 {
    height:180px;
    margin-bottom:-22px;
  }
}
@media only screen and (max-width: 600px) {
  .jumbotron-fluid {
  }
}
@media only screen and (max-width: 600px) {
  .checkout-button {
    margin-top:20px;
    margin-right:30%;
  }
}
@media only screen and (max-width: 600px) {
  #table_design {
    width:100%;
    height:auto;
    font-size:12px;
  }
}
@media only screen and (max-width: 600px) {
  table {
    font-size:12px;
  }
}

/*---------------------------------- invoice page ----------------------------*/
@media only screen and (max-width: 600px) {
  .invoice-footer {
    width:100%;
    height:auto;
  }
}
@media only screen and (min-width: 400px) {
  #t_design {
    width:100%;
    margin-left:-10%;
  }
}