body{overflow-x: hidden;                                                                     font-family: 'Euclid Circular B', sans-serif;}


/*h1,h2,h3,h3,h4,h5,h6{font-family: 'Roboto Condensed', sans-serif;}*/

/*p{font-family: 'Roboto Flex', sans-serif;}*/

:root{
      --main-color:#bd081c;
  }


/*.paratext{word-spacing:1px;text-align: justify;letter-spacing: 1px;line-height:30px;font-size:15px;}*/
.heading{letter-spacing:5px;}


/*navbar*/
.navbar-nav{column-gap:12px;}
.nav-link{color:black !important;}
.bghvr{background-color: #bd081c;color:white;}
.bghvr:hover{background-color:rgb(10, 10, 10);color:#f5ecec;}

/* NAVIGATION */



.navbar {
    background-color: rgba(255,255,255,0.4);
    border: none;
    color: white;
    z-index: 100;
    transition: background-color 1s ease 0s;
}
.navbar-default .navbar-brand {
    margin-top: 10px;
    color: white;
}
.navbar-default .navbar-brand:hover {
    color: #c57ed3;
    border: 1px solid #c57ed3;
}
.navbar-default .navbar-nav > li > a {
    color: white;
    margin: 10px 5px 5px 5px;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:active, .navbar-default .navbar-nav > li > a:focus {
    color: #c57ed3;
    border: 1px solid #c57ed3;
}
.navbar-default .navbar-nav > li > a:visited {
    color: #c57ed3;
    text-decoration: none;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
    background-color: transparent;
    color: #c57ed3;
}
.navbar-default .navbar-toggle {
    border-color: #c57ed3;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
    background-color: #ffffff;
}
.navbar-default .navbar-toggle .icon-bar {
    color: #c57ed3;
    background-color: #c57ed3;
}
.navbar-default .navbar-collapse.collapse.in ul {
    background-color: #ffffff;
}
/* Solid class attached on scroll past first section */
.navbar.solid {
    background-color: #ffffff;
    transition: background-color 1s ease 0s;
    box-shadow: 0 0 4px grey;
}
nav .nav-link{font-size:16px; font-weight:500; text-transform:uppercase;}


/* Sweep To Right */
.hvr-sweep-to-right {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.hvr-sweep-to-right:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #bd081c;
  
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-sweep-to-right:hover, .hvr-sweep-to-right:focus, .hvr-sweep-to-right:active  {
  color: white !important;
}


.hvr-sweep-to-right:hover:before, .hvr-sweep-to-right:focus:before, .hvr-sweep-to-right:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}
/*****************/
.banner-slider {margin-top:-74px;}
.banner-slider .carousel-item img {height:700px; }
 .carousel-caption {top:40%;}
 .carousel-caption h5 , .carousel-caption h2{text-shadow:2px 2px black;}
/***************/

.counters{
    background-image:
    
    url('../images/get-quote-form.jpg');
    background-size: cover;
    color: rgb(240, 226, 226);
    padding: 20px;
}

.spacing{padding:80px;border-radius:10px;}
@media all and (min-width: 992px) {
	.dropdown-menu li{ position: relative; 	}
	.nav-item .submenu{ 
		display: none;
		position: absolute;
		left:100%; top:-7px;
	}
	.nav-item .submenu-left{ 
		right:100%; left:auto;
	}
	.dropdown-menu > li:hover{ background-color: #f1f1f1 }
	.dropdown-menu > li:hover > .submenu{ display: block; }
}	
/* ============ desktop view .end// ============ */

/* ============ small devices ============ */
@media (max-width: 991px) {
  .dropdown-menu .dropdown-menu{
      margin-left:0.7rem; margin-right:0.7rem; margin-bottom: .5rem;
  }
}	


.overlay {
  position: absolute; 
  bottom: 0; 
  background: rgba(16, 16, 16, 0.8);
  /* Black see-through */
  color: #f1f1f1; 
  width: 100%;
  transition: .5s ease;
  opacity:0;
  color: white;
  font-size: 20px;
  padding: 10px;
  text-align: center;
}

.grid-item:hover .overlay {
  opacity: 1;
}

.carousel-wrap {
  margin: 90px auto;
  padding: 0 5%;
  width: 80%;
  position: relative;
}

/*projects*/
.card-img-top{height: 300px;}
.mybtn{background: #161616;color:white;}
.mybtn:hover{background: #bd081c;color:white;}

/*background image*/
.bgimg{background-image:
    linear-gradient( rgba(120, 121, 124, 0.5), rgba(90, 87, 87, 0.7)),
url('../images/home2.jpg');
background-size: cover;
background-position: center;
background-attachment: fixed;
color: rgb(12, 12, 12);
padding: 150px 0 100px 0;
margin-top:-74px;    
color:white;
}

/*about*/
.services{background:url('../images/left-1.png')30% 45% no-repeat; }

.services .img {
  border-radius: 8px;
  overflow: hidden;
}

.services .img img {
  transition: 0.6s;
}

.services .details {
  padding: 50px 30px;
  margin: -100px 30px 0 30px;
  transition: all ease-in-out 0.3s;
  /*background: white;*/
  position: relative;
  background: rgba(251, 249, 249, 0.89);
  text-align: center;
  border-radius: 8px;
  box-shadow: 0px 0 25px rgba(0,0,0, 0.1);
}

.services .details .icon {
  margin: 0;
  width: 72px;
  height: 72px;
  background: var(--main-color);
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: white;
  font-size: 28px;
  transition: ease-in-out 0.3s;
  position: absolute;
  top: -36px;
  left: calc(50% - 36px);
  border: 6px solid white;
}

.services a{text-decoration:none;}

.services .details h3 {
  color: #161616;/*var(--color-default);*/
  font-weight: 700;
  margin: 10px 0 15px 0;
  font-size: 22px;
  transition: ease-in-out 0.3s;
}

.services .details p {
  line-height: 24px;
  font-size: 14px;
  margin-bottom: 0;
}

.services .service-item:hover .details h3 {
  color: var(--main-color);
}

.services .service-item:hover .details .icon {
  background: rgb(242, 224, 224);
  border: 2px solid var(--main-color);
}

.services .service-item:hover .details .icon i {
  color: var(--main-color);
}

.services .service-item:hover .img img {
  transform: scale(1.2);
}

/*projectinfo*/

.parainfo{text-align: justify;letter-spacing: 30px;line-height:px;}
.gallery_sec{
  width:100%;
  
}

.gallery_sec img{
  width:100%;
  margin-bottom:30px;
  height:250px;
}

.gallery_sec a {
    position: relative;
    transition: 0.3s ease-in-out;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -ms-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
}


.gallery_sec a::before {
    position: absolute;
    content: "";
    width: 30px;
    height: 30px;
    background: none;
    background-size: contain;
    background-repeat: no-repeat;
  top:45%;
  left:50%;
  transform:translate(-50%, -50%);
}

.gallery_sec img {
    transition: 0.3s ease-in-out;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -ms-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
}

.gallery_sec a:hover img {
    position: relative;
    width: 100%;
}

.gallery_sec a:hover img {
    opacity: 0.2;
}

.gallery_sec a:hover::before {
    position: absolute;
    content: "";
    width: 50px;
    height: 50px;
    background: url(https://i.ibb.co/3fMkjjF/Resize.png);
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 99;
}

/*footer*/
.backclr{background-color: rgb(247, 245, 242);}
.ftrlink{color:rgb(20, 20, 20);}
.ftrlink:hover{color:red;}

/*contact and testimonial*/

.bg-back{
    background-color: #e6e2e2b2;
}
/*****GET IN TOUCH****/
.title-subw3hny:after {
    content: "";
    position: absolute;
    border: 0;
    width: 50px;
    height: 2px;
    background: black;
    z-index: 1;
    right: 40px;
    left: 0;
    top: 30px;
    margin: 0 auto;
    text-align: center;
}

.title-subw3hny {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    padding-bottom: 10px;
    display: inline-block;
    line-height: 28px;
    color: black;
    position: relative;
}


/*project on index*/


.column:last-child {
	padding-bottom: 60px;
}
.column::after {
	content: '';
	clear: both;
	display: block;
}
.column div {
	position: relative;
	float: left;
	width: 400px;
	height: 3cou00px;
	margin: 0 0 0 25px;
	padding: 0;
}
.column div:first-child {
	margin-left: 0;
}
.column div span {
	position: absolute;
	bottom: -20px;
	left: 0;
	z-index: -1;
	display: block;
	width: 300px;
	margin: 0;
	padding: 0;
	color: #444;
	font-size: 18px;
	text-decoration: none;
	text-align: center;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
	opacity: 0;
}
figure {
	width: 414px;
	height: 300px;
	margin: 0;
	padding: 0;
	background: #fff;
	overflow: hidden;
}
figure:hover+span {
	bottom: -36px;
	opacity: 1;
}

/* Shine */
.hover14 figure {
	position: relative;
}
.hover14 figure::before {
	position: absolute;
	top: 0;
	left: -75%;
	z-index: 2;
	display: block;
	content: '';
	width: 50%;
	height: 100%;
	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	-webkit-transform: skewX(-25deg);
	transform: skewX(-25deg);
}
.hover14 figure:hover::before {
	-webkit-animation: shine .75s;
	animation: shine .75s;
}
@-webkit-keyframes shine {
	100% {
		left: 125%;
	}
}
@keyframes shine {
	100% {
		left: 125%;
	}
}

/* Circle */
.hover15 figure {
	position: relative;
}
.hover15 figure::before {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	display: block;
	content: '';
	width: 0;
	height: 0;
	background: rgba(255,255,255,.2);
	border-radius: 100%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	opacity: 0;
}
.hover15 figure:hover::before {
	-webkit-animation: circle .75s;
	animation: circle .75s;
}
@-webkit-keyframes circle {
	0% {
		opacity: 1;
	}
	40% {
		opacity: 1;
	}
	100% {
		width: 200%;
		height: 200%;
		opacity: 0;
	}
}
@keyframes circle {
	0% {
		opacity: 1;
	}
	40% {
		opacity: 1;
	}
	100% {
		width: 200%;
		height: 200%;
		opacity: 0;
	}
}

/*whatsapp*/
.whatsapp{position:fixed;  bottom: 5%;  left: 5%; border-radius:50%;box-shadow:0 0 10px 7px #8a898963; z-index:9999;animation: beat .40s infinite alternate;
	transform-origin: center;}
	
@keyframes beat{
	to { transform: scale(1.2);} }

  /*up btn*/
  .animated {
    animation: up-down 2s ease-in-out infinite alternate-reverse both;
}

@media (max-width: 991px) {
   .animated {
    -webkit-animation: none;
    animation: none;
  }
}

@-webkit-keyframes up-down {
  0% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(-10px);
  }
}

@keyframes up-down {
  0% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(-10px);
  }
}


/*  return to top */
#btnreturntotop {
	display: none; 
	position: fixed; 
	bottom: 40px; 
	right: 21px; 
	z-index: 9999; 
	border: none; 
	outline: none; 
	background-color: rgb(162, 18, 25);
	color: white; 
	cursor: pointer; 
	border-radius: 50%; 
	font-size: 18px;
	height:40px;
	width:40px;
}



 aside.fixed {position: fixed; width:26.39%;}
 
 
@media (max-width: 991px){
    aside.fixed {position: static; width:100%;}
    .banner-slider .carousel-item img {height:auto; }
    .spacing{padding:40px;}
}


