/***********start overiding bootstrap*******/
body {font-family: "Mulish"; color:#868686; font-size: 15px}
h1, h2, h3, h4, h5, lead {font-family: "Mulish", sans-serif; color:#292929; font-weight:300; font-optical-sizing: auto;}
a:hover {text-decoration:none}
/*main navbar*/
.h1 {margin-bottom:40px};
.navbar {min-height:70px;}
  .navbar-nav { margin: 5px 10px;
  padding: 1.2em 0 }
  #myNavbar.scrolled {
  background-color: #1f1f1f; /* Example color for scrolled state */
  border-color: #1f1f1f; /* Example border color for scrolled state */  
}
 #myNavbar.scrolled .navbar-nav{padding: .4em 0}

/*active link*/

.navbar-default .navbar-nav > .active > a, .navbar-nav > .active > a:hover, .navbar-nav > .active > a:focus {
    color: #292929;
	background-color:transparent;
}
/*active link*/
.navbar-default .navbar-nav > li > a {font-family: "Urbanist", sans-serif;
color: #fff;
font-size:1.4rem;
font-weight: 500;
text-transform: uppercase;}
.navbar-default .navbar-nav > li > a:hover {color:#f9ad3d}
  .contact{background-color: #f9ad3d;}
  .contact span{margin-right: 10px}
  .contact a{color: #fff;}
  .navbar-default .navbar-nav > .contact a:hover{color: #1f1f1f;}
.navbar-default {
  background-color:#2525253b;
  border-color: transparent;
  padding: 5px;}
/* .navbar-default .container{border-bottom: 1px solid rgba(203,203,203,.5)}*/
/*Brand name*/
.navbar-brand {
	padding: 0 25px;
}
.navbar-inverse .navbar-brand span{color:rgb(255,0,0);}
/*drop down Menu*/
.dropdown-menu {
	min-width: 200px;
}
.dropdown-menu .img{padding:20px 40px 20px 0}
/*drop down Links*/
.dropdown-menu > li > a {color:rgb(204,204,204);padding: 6px 20px;}
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
	background-color:#D3D3D3;
	color:rgb(255,255,255);
	/*hover effect */
	padding-left:25px;
	/*to make th hover effect smother*/
	-webkit-transition:padding 0.7s ease; 
	-moz-transition:padding 0.7s ease;
	-o-transition:padding 0.7s ease;
	transition:padding 0.7s ease;
}
.dropdown-menu .divider {background-color:rgb(128,0,0);}
.navbar-right .dropdown-menu {left:0px;right:auto; padding:60px}
/*didnt work with explorer
.navbar-nav > li > a {
  padding-top: 25px;
  padding-bottom: 25px;
}*/

.navbar-toggle {margin:18px 14px}
.top-links{float: right;
margin-top:10px;}
.top-links .dropdown-menu{
	top:auto;
  left: auto}
.top-links a {
  margin-right: 15px;
  color: #fff;}
  .top-links .dropdown-menu > li > a {
  color: #868686;
  margin-right: 0;}
  
/* carousel */
.home.carousel, .home .carousel-inner > .item {width:100%; height:100%}
 .carousel-inner > .item::before {/* transparent overlay on carrousel */
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5); /* Adjust color and opacity as needed */
        z-index: 1; /* Ensure it's above the image but below content */
    }
.home .carousel-inner > .item > img {
      height: 100%;
      width: 100%;
      object-fit: cover; 
    }
.carousel-caption {
	right: auto;
    left: 5%;
	padding-bottom:80px;
	padding-right:20px;
	padding-left:20px;
	text-align:left;
  	text-shadow:none;
	width:90%;
	top: 220px;
	bottom:auto;
}
.carousel-caption h2{color: #fff; font-size:75px; font-weight: 200;}
.carousel-caption h2 span, .subscribe h1 span{color:#f9ad3d}
.carousel-indicators {bottom:0px;}
.carousel-indicators li {
	height:11px;
	width:11px;
	border: 1px solid rgb(255,255,255);
}
.carousel-indicators .active {
	height:13px;
	width:13px;
	background-color:rgba(255,255,255,.7);
}
/*start carouse fade*/
.carousel-fade .carousel-inner .item {
  opacity: 0;
  transition-property: opacity;
  /* Add other transitions as needed, e.g., for transform */
}

.carousel-fade .carousel-inner .active {
  opacity: 1;
}

/* Zoom effect for active item */
.carousel-fade .carousel-inner .active img {
  transform: scale(1.15); /* Adjust zoom level as desired */
  transition: transform 0.7s ease-in-out; /* Adjust timing and easing */
}

/* Ensure non-active items are reset */
.carousel-fade .carousel-inner .item:not(.active) img {
  transform: scale(1);
}

/* Optional: Adjust transition for the fade effect */
.carousel-fade .carousel-inner .item {
  transition: opacity 0.7s ease-in-out; /* Match with zoom transition duration */
}
.carousel-inner > .item.active > img {
    animation: zoomIn 4s ease-in-out forwards;
}

@keyframes zoomIn {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.1); /* Adjust zoom level as needed */
    }
}

.years{position: absolute;
    right: 50px;
    top: 70px;
    width: 120px;}
/*end carouse fade*/
/***********end overiding bootstrap*******/

/* start section about */
.about {padding-top:60px;padding-bottom:60px; overflow: hidden}
.about .lead {
	color:#868686;
	font-size:16px;
	margin-top:15px;
	font-family: "Poppins";
}
.about-txt {margin: 40px -100px;
  padding: 50px;
  background-color:#fff}
  .yellow{background-color: #f9ad3d;
  color:#fff}
  .yellow h1, .yellow h3, .yellow h4{color:#fff}
  .grey{background-color: #1f1f1f;
  color:#fff;
  padding: 50px;}
  .contacts .grey a{color:#fff;}
  .map{padding: 0}
  .grey h3, .grey h4{color:#fff}
  .grey h1, .grey span{color: #f9ad3d}
.features {
	padding-top:50px;
	padding-bottom:50px;
	overflow: hidden;
}
.features a{color:#868686}
.office1>span{background-color:#1f1f1f; display:block; padding: 12px 20px; margin-top:20px}
.office1 span h3{color:#fff; }
.office1>span>h3>span{color:#f9ad3d; }
.office{background-color:#f9ad3d; padding: 5px 15px 20px; color:#fff; min-height:300px}
.office:hover{background-color: #1f1f1f;}
.office h3{color:#fff}
.office .box{padding-bottom: 20px; height:270px}
.box1{height:255px}
.box2{border: 1px solid #fff; padding: 10px}
.contacts .box2 a{color:#fff}
.office a{color: #fff}
.features .col-lg-2{width: 12.5%; padding: 0}
.feat p {line-height:2em;}
.feat  {margin-bottom: 50px; opacity: 0.8;}
.feat:hover {opacity: 1;}
.features .feat span.glyphicon {font-size:30px;margin-bottom:10px;}
.features .feat span.glyphicon hover {color:rgb(255,0,0);}
.features .slick-slide {position: relative}
.features .slick-slide .caption1{
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 75%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
  background-color: #fff;
  color: #292929;
  font-size: 16px;
  padding: 16px 26px;
  width: 100%}
  .features .slick-slide:hover .caption1{
	 opacity: 1}
/* start section about */

/* end testimonials section */
.testimonials {padding-top: 50px;padding-bottom:50px;}
.testimonials .lead {line-height: 2em;margin-bottom:10px;}
.testimonials span {
	font-size:18px;
	font-weight:bold;
	color:rgb(255,0,0);
}
.testimonials .carousel-inner {min-height:160px;}
.testimonials .carousel-indicators {
	position:static;
	width:100%;
	margin-left:auto;
	padding-top:20px;
}
.testimonials .carousel-indicators li{
	text-indent:0px;
	width:80px;
	height:80px;
	opacity:0.5;
	border: 2px solid rgb(255,255,255);
	border-radius:50%; /* Circle*/
	overflow:hidden; /* to let the photo inside the border*/
	margin:5px;
}
.testimonials .carousel-indicators li.active{
	opacity:1;
	width:80px;
	height:80px;
	background:none;
	border: 2px solid rgb(51,51,51);
	border-radius:50%;
	overflow:hidden;
}
.testimonials .carousel-indicators li img{max-width:100%;}
/* start section price table */
.price-table {
	background-color: #252525;
	padding-top:80px;
	padding-bottom:80px;
}
.price-table .price-box{
	color: #fff;
	margin-bottom:15px;
}
.price-table .glyphicon{font-size: 44px; color: #fff}
.price-table .glyphicon:hover{color: #CBC9C9}
.price-table .img{padding:40px 20px}
.price-table .yellow:hover, .milk .yellow:hover{background-color:#DBB935}
.price-table .yellow, .price-table .blue, .price-table .red, 
.price-table .yellow, .price-table .blue, .price-table .red{background-color:rgba(255,255,255,.2)}
.price-table .blue:hover, .milk .blue:hover{background-color:#5DB4D5}
.price-table .red:hover, .milk .red:hover{background-color:#C53B31}
.price-table, .price-table h1{color: #fff;}
.price-table h1 span{color: #f9ad3d;}
.price-table h1{margin-bottom:50px}
.price-table h3{color: #f9ad3d;}
.price-table h3:hover{color: #faa221;}
.price-table h4{color: #fff;}
.price-table .btn-primary{border-radius:0; margin-top:20px; padding: 10px 16px; font-size: 16px;}
.price-table .sub .glyphicon{font-size: 20px; float:inline-start;; margin: 0 10px}
.price-table .sub div{text-align:left}
.price-table a{color:#fff}
.price-table .price-box:hover p{
	-webkit-transform:scale(1.1,1.1)rotate(360deg);/*scale to be bigger rotate to rotate */
	-moz-transform:scale(1.1,1.1)rotate(360deg);
	-o-transform:scale(1.1,1.1)rotate(360deg);
	transform:scale(1.1,1.1)rotate(360deg);
	border:2px solid rgb(153,153,153);
}
.price-table .price-box h3{margin:5px 0 15;}
.price-table .price-box p{
	font-size:35px;
	font-weight:bold;
	color:#666;
	width:100px;
	height:100px;
	background-color:rgb(204,204,204);
	border-radius:50%; /* to make a square*/
	line-height:100px; /* to make to text centered in the square*/
	border:2px solid rgb(255,255,255);
}
.price-table .price-box ul{line-height:250%;font-size:18px;}
.price-table .price-box a{margin-bottom:5px;}
/* end section price table */
/* start section our team */
.team {
	background:url("../images/contact.jpg") no-repeat center center fixed;
	width:100%;
	min-height:500px;
}
.team .team2 {
	background:rgba(2,2,2,0.5);
	color:rgb(255,255,255);
	min-height:500px;
	padding-top:40px;
	padding-bottom:40px;
}
.team span{color:#f9ad3d}
.team .btn{background-color: #f9ad3d; color:#fff; padding:15px; margin-top:30px; border-radius: 0;}
.team2 h2{font-size: 60px;
  font-family: "Mulish", sans-serif;
  font-weight: 200;}
  .team h3{color:#fff}
.team2 .person {margin:0 100px 40px 0; }
.team2 .btn-danger{background-color:#FE0002;
margin-top: 30px;
border-radius:0}
.team2 a{color:#fff}
/* end section our team */

/* start section suscribe */
.subscribe {
	padding-top: 40px;
	padding-bottom:70px;
	background-size:cover;
	
}
.subscribe .h1 {
	letter-spacing:2px;
	margin-bottom:20px;}
	.subscribe h1 {
margin-top:40px;}
.subscribe .progress {
  height: 5px;
  border-radius:0;
  background-color:#ddd;
  -webkit-box-shadow:none;
  box-shadow: none;}
  .progress-bar-label {float:right; color:#868686; font-size:15px}
  .skils-progress{margin-top: 50px;}
  .skils-progress h4{font-size: 22px;}
  .progress-bar-grey{background-color: #252525;}
  .progress-bar-yellow{background-color: #f9ad3d;}
.subscribe p {margin-bottom:30px;}
.subscribe .form-control {
	border-radius:0;
	margin-right:-5px;
	width:300px;
}
.subscribe button {border-radius:0;}
.btn-primary {
  background-color: #f9ad3d;
  border-color:transparent;
  margin-top: 30px;
  border-radius:0;
  padding: 10px 25px;
  font-size: 15px;
  font-weight: 300;}
 .btn-primary:hover, .btn-primary:active:focus {border-color: transparent;
 background-color: #fff;
 color:#1f1f1f}
/* end section suscribe */

/* start section stas */

.stats .stats2 {
	background:rgba(2,2,2,0.7);
	color:#B6B5B5;
	min-height:300px;
	padding:70px;
}
.stats .stats2 h1{color:#B6B5B5;
text-transform:uppercase}
.stats3 {margin-bottom:30px;}
.stats3:hover {color:rgb(255,255,255);	}
.stats3 p{
	font-size:60px;
	font-weight:600;
	margin-bottom:0px;
}
.stats3 span{font-size:18px;}
/* end section stas */
/* start section skills */
.skils {padding-top:40px;padding-bottom:60px;}
.skils h3 {font-weight:bold;margin-top:0px;}
.skils span.glyphicon {
  font-size: 30px;
  margin-bottom: 10px;
  float:none;
}
.skils h4{font-weight:600}
/* end section skills */

/* start section contact */

.contact_us {
	background:rgba(2,2,2,0.7);
	min-height:300px;
	color:rgb(255,255,255);
	padding-top:120px;
	padding-bottom:120px;
}
.contact_us p {margin-bottom:40px;}
.contact_us textarea {height:108px;}
.contact_us input[type="text"], .contact_us textarea{
	background:rgba(82,78,78,0.7);
	color:rgb(255,255,255);
	border:none;}
/* end section contact */
/* start section our clients */
.our_clients{
	padding-top:50px;
	padding-bottom:50px;
	color: #292929;
	font-size: 17px;
}
.our_clients h1{margin-bottom: 30px}	
.our_clients li{
	padding:10px 0;	}

/* end section our clients */
/* start section footer */
.footer {
	background:#111;
	color:#292929;
	padding-top:10px;
}
.footer a{color:#b2b2b2;	}
.footer a:hover {color:#fff;
text-decoration:none}
.footer h3 {color:#f9ad3d;
	letter-spacing:1px;
	margin:30px 0px 20px;
	font-size:20px}

.footer .three-columns {overflow:hidden;}
.footer .three-columns li{
	width:33.3333%;
	float:left;
	padding:5px 0;
}
.footer .social-list {overflow:hidden;margin:20px 0 10px;}
.footer .social-list li{
	float:left;
	margin:3px;
	opacity:0.7;
	filter:alpha(opacity=70);
}
.footer .social-list li:hover {opacity:1;filter:alpha(opacity=100);}
.footer .img-thumbnail {
	background:rgba(0,0,0,0.2);
	border:1px solid #444;
	margin-bottom:5px;}
.footer .copyright {
	background:#111;
	color:#b2b2b2;
	padding:15px 0;
	margin-top:30px;
	font-size:14px;
}
.footer span {color: #f9ad3d;
  margin-right: 10px;}
/* end section footer */
/* start our grouping system */
.about .our_contact, .team, .stats {
	-webkit-background-size:cover;
	-moz-background-size:cover;
	-o-background-size:cover;
	background-size:cover;
}
.footer .social-list li, .our_clients img, .stats3, 
.testimonials .carousel-indicators li.active, 
.price-table .price-box p, .price-table .img, .office{
	-webkit-transition:all 0.5s ease-in-out; 
	-moz-transition:all 0.5s ease-in-out;
	-o-transition:all 0.5s ease-in-out;
	transition:all 0.5s ease-in-out;}	
/* end our grouping system */
/* there are 2 ways one to set the min & max width (in this way we have to type all the styles in every media) 
the other is to set min width only (in this case the style set in the first media will go through all other screens unless we overide it)*/
/*carousel fade*/
.carousel-fade {
    .carousel-inner {
        .item {
            transition-property: opacity;
            -webkit-transition-property: opacity;  
            -moz-transition-property:    opacity;
            -ms-transition-property:     opacity; 
            -o-transition-property:      opacity;
        }
        
        .item,
        .active.left,
        .active.right {
            opacity: 0;
        }

        .active,
        .next.left,
        .prev.right {
            opacity: 1;
        }

        .next,
        .prev,
        .active.left,
        .active.right {
            left: 0;
            transform: translate3d(0, 0, 0);
            -webkit-transform: translate3d(0, 0, 0);
            -moz-transform: translate3d(0, 0, 0);
            -ms-transform: translate3d(0, 0, 0);
            -o-transform: translate3d(0, 0, 0);
        }
    }

    .carousel-control {
        z-index: 2;
    }
	
}

html, 
body,
.carousel, 
.carousel-inner, 
.carousel-inner .item, 
.carousel-control {
    min-height:300px;
}

/* Mobiles and Tablets*/
@media (max-width:767px) 
{
	.navbar-default {background-color: #1f1f1f;}
	.navbar-brand { padding: 0 3px;}
	.navbar-nav > li > a {
		padding-top:10px;
		padding-bottom:10px;
		}
	.navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #FFF;
    margin-bottom: 5px;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover {
    color:#C8C6C6;
    margin-bottom: 5px;
  }
   .navbar-nav .open .dropdown-menu > li > a{
    padding: 0 15px 0 25px;
  }
 .home.carousel, .home .carousel-inner > .item {
            height: 500px; 
        }
  .btn-primary {
  width: 100%;
}
.about .container, .contact1{display: flex;
        flex-direction: column-reverse;
    }
.certified .container, .portfolio .container{display: flex;
        flex-direction:column;
    }
.about-txt {
  margin: 0;
  padding: 10px 0 25px 15px;}
.team2 .btn-danger {
  width: 100%;
}
  .price-table .img {
  padding: 20px 10px;
}
.about {
  height: auto;
}
		.subscribe .form-control{
			margin:20px auto;
		}
		.subscribe {
  background:none}
		.navbar-fixed-top .navbar-collapse, 
		.navbar-fixed-bottom .navbar-collapse
		{max-height:none
		}
		.carousel-inner > .item > img{
  width: 100%;
  height: auto;
  float:right;
  max-width:none}
  .navbar-right .dropdown-menu {
  left: 0px;
  right: auto;
  padding: 10px;
}
}
/* Small Screen*/
@media (min-width:768px) and (max-width:991px) 
{
	.navbar-nav .open .dropdown-menu {
        position: static;
        float: none;
        background-color: transparent;
        border: 0;
        -webkit-box-shadow: none;}
	.navbar-right .dropdown-menu { padding: 0; }
	.dropdown-menu > li > a {
    color: #fff;}
.carousel-caption h2 {font-size: 25px;}
.carousel-caption {top: 120px}
.years{top: 50px; width: 80px;}
.top-links {
  margin-top: 0;
  margin-right: 25px;
}
.navbar-nav {
 margin: 10px 30px 10px 0;}
 .box1 {height: 250px;}
 .dropdown-menu .img {
  padding: 0;
  margin: 40px 0;
}
.grid-demo h1 {font-size: 30px;}
  .price-table .img {
  margin-bottom: 20px;}
.navbar-default .navbar-nav > li > a {
  font-size: 1.7rem;}
  .nav > li > a {
  padding: 10px 10px;}
}
/* Meduim Screen*/
@media (min-width:992px) and (max-width:1199px) 
{
.navbar-brand {
  padding: 0;
}
.carousel-caption h2 {
    font-size: 40px;}
.our_clients .col-md-2{width: 20%}	
.box1 {height: 250px;}
.our_clients {
    font-size: 15px;}
}
/* Large Screen*/
@media (min-width:1200px) 
{.our_clients .col-md-2{width: 20%}	
}
/* Force navbar to collapse on iPad sizes */
@media (max-width: 1023px) {
    .navbar-header {
        float: none;
    }

    .navbar-toggle {
        display: block;
    }

    .navbar-collapse {
        border-top: 1px solid #eee;
    }

    .navbar-collapse.collapse {
        display: none !important;
    }

    .navbar-nav {
        float: none !important;
        margin: 0;
    }

    .navbar-nav > li {
        float: none;
    }

    .navbar-collapse.in {
        display: block !important;
    }
}