@font-face {
    font-family: Eurostile;
    src: url(css/Eurostile-LT-Std-Demi-Oblique_16309.ttf);
}
* {
	/*font-family: 'Cairo', sans-serif;*/
	font-family: 'Eurostile';
}

body {
	margin: 0;
	padding: 0;
}
body:hover {
	cursor:default;
	user-select: none;
}

#btnUp {
	position: absolute;
	bottom: 50px;
	right: 50px;
}

.header span {
	color: #58585a;
}

.navbar{
	transition: all .5s ease-in-out;
 	padding-top: 0px;
 	padding-bottom: 0px;
}


nav a {
	text-decoration: none;
	color: #fff;
}

nav a:hover {
	text-decoration: none;
	color: #dedede;
}

nav .navbar-brand {
	width: 35%;
}
.nav-item.col{
	padding: 0;
}
.navbar-brand .img-fluid {
	max-width: 27%;
    margin: 0px 7px;
}

nav .collapse {
	width: 80%;
}

nav ul {
	width: 100%;
	text-align: center;
}

nav ul li {
	font-weight: bold;
	border-bottom: 2px solid transparent;
}

nav ul li:hover {
	border-bottom: 2px solid #58585a;
}

.navbar-toggler {
	cursor: pointer;
	color:#58585a;
}
.header-top{
    overflow: hidden;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 1030;
}

.navbar-brand span{color:#fff}

.main-panel::before {
	background: url("../images/background.png") no-repeat 100% 46% fixed;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	/* border-radius: 0 0 50% 50% / 0 0 100% 100%; */
	transform: scaleX(1.5);
	box-shadow: inset 50px 50px 500px #e02a28;
}

.main-panel {
	position: relative;
	display: flex;
	width: 100%;
	height: 100vh;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	color: #fff;
}

.main-panel .layer {
    background-color: rgba(0,0,0,.5);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
	height: 100vh;
	/* border-radius: 0 0 50% 50% / 0 0 100% 100%; */
	transform: scaleX(1.5);
}

.main-panel .content {
	position: relative;
	z-index: 1;
	margin: 0 auto;
	text-align: center;
	width: 45%;
    padding: 10px;
}

.main-panel .content h2 {
	margin: 0;
	padding: 0;
	font-size: 3em;
}

.main-panel .content p {
	font-size: 1em;
}

.main-panel .btn{
	background-color: #58585a;
    margin-left: 15px;
	font-size: 18px;
	color: #fff;
	margin-top: -5px;
	justify-content: center;
}
.main-panel input{
    border: 0;
	margin: 5px 0;
}
.main-panel .content span {
	background: #58585a;
	color: #fff;
	border-radius: 50% 50%;
	padding: 10px 10px;
	position: relative;
	top: 70px;
	display: block;
    width: 42px;
    margin: auto;
}

.main-panel .content span:hover {
	cursor: pointer;
}


/*map dott */
/* .dot1{position: relative;
	  top:50%;
	  left:400px } */

/* start features */
.features {
	padding:60px 15px;
}

.features .feature {
	/* margin-top: 30px;

	/* display: inline-block; */
	/* width: 300px;
	height: 300px; */
	/* border-radius: 50%; */
	color:rgba(0,0,0,.5);
	/* background:#58585a; */
	/* overflow: hidden; */
	padding: 0 40px;
	justify-content: center;
	margin-top: 15px;
}

.about-btn{
	margin-top: 25px;
}
.features .feature span {
	color: #e02a28;
}

.features .feature h6 {
	color: black;
	font-weight: 900;
	margin-top: 20px;
}

.features .feature p {
	font-weight: 500;

}

.panel {
	margin-top: 100px;
	width: 100%;
	/* height: 80vh; */
	background-size: cover;
	color: black;
}

.panel-background {
	background: url("../images/truck-background.png") no-repeat center center scroll;
	margin-top: 100px;
	width: 100%;
	height: 80vh;
	opacity: 0.07;
	background-size: cover;
	position: absolute;
    top: 165vh;
    left: 0;
}

.panel .row div:nth-child(2) {
	margin-top: 30px;
	line-height: 2;
}
.features-imag{
	width: 50%;
	padding: 0px !important;
	flex: 1;
}
.features-imag img{
width: 100%;
height: 100%;

}
.features-col{
	background-color: #F1F4FA;
	width: 50%;
	flex: 1;
}
.features .header{
	margin-top: 100px;
	position: relative;
	color: #e02a28;
}
.header-par{
	margin-top: 40px;
	font-size: 40px;
	font-weight: bold;
}
.features .header span::before{content: "";
	position: absolute;
	top:60px;
	left:45%;
	width:10%;
	height:4px;
	background-color:#e02a28;
	color: #e02a28;
}
.features .row{
	display: flex;
}



/*about*/
.about{padding:10px 0px;}
.about h2.sub-title{color:#e02a28;;
					position: relative;}

.about h2 span


.about .about-sub-title-div {
	margin-bottom: 20px	;
}
.about-icon{
	color:#e02a28 !important;

}
.about-feature{
	padding: 2% ;
}

/* services */
.services h2{
	position: relative;
	color: #e02a28;
}
.header-par{
	margin-top: 40px;
	font-size: 40px;
	font-weight: bold;
}
.services span::before{content: "";
	position: absolute;
	top:60px;
	left:45%;
	width:10%;
	height:4px;
	background-color:#e02a28;
	color: #e02a28;
}
.services-pra{
	font-size: 50px;
	padding: 10px 70px;
}
.services-card{
	padding: 50px;
	margin: 10px 0px;

}

/* ****************************************** */
/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
    /* background-color: transparent; */
    /* width: 300px;
    height: 300px; */
    /* border: 1px solid #f1f1f1; */
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
  }

  /* This container is needed to position the front and back side */
  .flip-card-inner {
    /* 	position: relative; */
    width: 100%;
    height: 100%;
    /* text-align: center; */
    transition: transform 0.8s;
    transform-style: preserve-3d;
  }
  .relative-div{
	position: relative;
  }
  /* Do an horizontal flip when you move the mouse over the flip box container */
  .flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
  }

  /* Position the front and back side */
  .flip-card-front, .flip-card-back {
    position: absolute;
   width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
  }

  /* Style the front side (fallback if image is missing) */
  .flip-card-front {
    color: black;
  }

  /* Style the back side */
  .flip-card-back {
    background-color: white;
	border: #F1F4FA solid 7px;
    /* color: white; */
    transform: rotateY(180deg);
  }
/* ****************************************** */

/*work*/
.work{background-image: url(../images/hero_bg_1.jpg);
	  background-attachment: fixed;
	  background-size: cover;
	  background-position: center center;}

.work h2{color:#e02a28;
         font-weight: 600;}

.work .overlay{padding: 60px 0px;}

.work .overlay{background: rgba(0, 0, 0, 0.7);}

.step span{display: flex;
		   width:50px;
		   height:50px;
		   border-radius: 50%;
		   border:1px solid #fff ;
		   color:#e02a28;
		   font-size: 30px;
		   align-items: center;
		   justify-content: center;}

.btn:focus{box-shadow: none;}

/* career */
.career{
	padding:60px 0px;
}

.career h2{
	position: relative;
	color: #e02a28;
}
.career-h3-div{
	padding:60px 30px 20px 30px ;
}
.career-p-div{
	padding:0px 30px 60px 30px ;
}
.career-card-first{
	height: 400px;
}

.header-par{
	margin-top: 40px;
	font-size: 40px;
	font-weight: bold;
}
.career-pra{
	font-size: 50px;
	padding: 10px 70px;

}
.career span::before{content: "";
	position: absolute;
	top:60px;
	left:45%;
	width:10%;
	height:4px;
	background-color:#e02a28;
	color: #e02a28;
}

 .career-imag img {
	width: 100%;
	height: 100%;
}
.career-card{
	padding: 0px 30px;
	width: 100%;
	height: 100%;
}

.btn-div{
	position: absolute;
	transition: top .5s;
	justify-content: center;
	top: 0px;
	left: 0px;
	bottom: 0px;
	right: 0px;
}
.btn-div button{
	position: absolute;
	top: -50px;
	left: 30%;
}
.btn-div h4{
	position: absolute;
	top: 280px;
	/*left: 50px;*/
	color: white;
	font-size:xx-large;
	font-weight: bolder ;
	width: 100%;
	text-align: center;
}
.career button{
	background-color: #e02a28;
	color: white;
	width: 40%;
	text-align: center

}

.customer-servec{
	overflow: hidden;
	position: relative;
	justify-content: center;
	/*filter: grayscale(100%);*/
}
.customer-servec:hover .btn-div{
	position: absolute;
	justify-content: center;
	top: 200px;
	left: 0px;
	bottom: 0px;
	right: 0px;
}
.sales-ex{
	overflow: hidden;
	position: relative;
	justify-content: center;
}
.sales-ex:hover .btn-div{
	position: absolute;
	justify-content: center;
	top: 200px;
	left: 0px;
	bottom: 0px;
	right: 0px;
}
.sales-hed{
	overflow: hidden;
	position: relative;
	justify-content: center;
}
.sales-hed:hover .btn-div{
	position: absolute;
	justify-content: center;
	top: 200px;
	left: 0px;
	bottom: 0px;
	right: 0px;
}
.operation-ex{
	overflow: hidden;
	position: relative;
	justify-content: center;
}
.operation-ex:hover .btn-div{
	position: absolute;
	justify-content: center;
	top: 200px;
	left: 0px;
	bottom: 0px;
	right: 0px;
}
.operation-hed{
	overflow: hidden;
	position: relative;
	justify-content: center;
}
.operation-hed:hover .btn-div{
	position: absolute;
	justify-content: center;
	top: 200px;
	left: 0px;
	bottom: 0px;
	right: 0px;
}


/*partness*/
.partners{padding:60px 0px;
		  background-color: #EDEDED;}



.logo{text-align: center;}

/*transport*/
.transport{padding:60px 0px;
		   background-color: #EDEDED;}

.transport .btn{background-color:#58585a;
				margin-left: 15px;
				color: #fff;   }


/*feedback*/
.feedback{padding:60px 0px}

.feed{border:1px solid #EEE}
.feed p{height: 160px;overflow: hidden;}
.carousel-small{display: none;}

.carousel-small .feed{width:50%;
					  margin: auto;}

.carousel-small h4{color:#58585a}

.feedback h4{color:#58585a}

.carousel-indicators li{background-color:#58585a;
                        height: 5px;}

.carousel-indicators{margin-top: 30px;}
#client-carousel .carousel-item{
	margin-bottom: 15px;
}

/*footer*/
footer{background-color: #EDEDED;}
.footer-top{background-color: #EDEDED;
	padding:15px 0px;}

	.footer-top li{font-size: 12px;
	margin-left: 10px;
	padding:5px}

	.footer-top ul{display: flex;
	justify-content: center;}

	.footer-top a{color:#5A5959;}

	.footer-bottom{background-color: #e02a28;
	padding:15px 0px}

	.footer-bottom a{color:#fff}
	.footer-bottom i:hover{color: #58585a}

	.footer-links{width: 50%;
		margin: auto;
		display: flex;
		flex-wrap: wrap;
		margin: 10px auto;
		justify-content: space-between;}
.footer-bottom p{
	margin-top: 10px;
	margin-bottom: 0px;
    color: white
}
.navbar.scroll-navbar {
	background: #e02a28;
}
.scroll-navbar a:hover,.scroll-navbar  .navbar-brand span{
color: #fff !important;
}

.navbar-toggler{
	margin: 10px 0;
}
.pages-links{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;


}
.pages-links a{
color :#fff;
width: 15%;
font-weight: bold;
margin-top: 8px;

}
.pages-links a:hover{
	text-decoration: none;
}
.mg-top{
	margin-top: 10px;
}
.btn-primary {
    background-color: #58585a;
    border-color: #58585a;
}
.btn-primary:hover {
    background-color: #58585a;
    border-color: #58585a;
}
.footer-bottom i {font-size: 20px;}
.footer-bottom i:hover{color: #58585a}

/*branches*/
#map h5{
	font-size: 1em;
}
#map p{
	font-size: 0.8em;
}
.whatsLink{
	margin: 0px 12px;
    padding: 0px;
    position: fixed;
    z-index: 2147483644;
    bottom: 24px;
    top: auto;
    height: 60px;
    width: 60px;
    border-radius:50%;
    box-shadow: rgb(0 0 0 / 15%) 0px 4px 12px 0px;
    display: block;
    background: linear-gradient(30deg, #01601f, #2eff04);
    animation: 3s ease-out 0s 1 normal none running slideInFromBottomDelay;
    color: #fff;
    text-align: center;
    padding: 2px;
    font-size: 38px;
	left: 12px;
}
.whatsLink:hover{
	color: #ddd;
}
/*@media (max-width: 767px){*/
/*	.pages-links a{*/
/*		width: 49%;*/
/*	}*/

/*		.main-panel::before {*/
/*			background: url("../images/background.png") no-repeat 25% 71% fixed;*/
/*			background-size: 145% 100%;*/
/*		}*/

/*	.main-panel .content{*/
/*		width: 95%;*/

/*	}*/
/*	.main-panel .btn.track{*/
/*		display: block;*/
/*		margin: auto;*/
/*		border-radius: 0;*/
/*		width: 100%;*/
/*	}*/
/*	.main-panel  .w-75{*/
/*		width: 100%  !important;*/
/*	}*/
/*	.main-panel::before{*/
/*		border-radius: 0;*/
/*		height: 80vh;*/
/*	}*/
/*	.main-panel .layer{*/
/*		border-radius: 0;*/
/*		height: 80vh;*/
/*	}*/
/*}*/

.begin {
	display:block;
	z-index:999;
	/* margin-top: 120px; */
	animation: MoveUpDown 1s linear infinite;
	position: absolute;
	left: 0;
	bottom: 0;
  }

  @keyframes MoveUpDown {
	0%, 100% {
	  transform: translateY(0);
	}
	50% {
	  transform: translateY(-15px);
	}
  }

  .mid-image{
	opacity: .4;
	filter: brightness(70%);
	width: 120%;
	height: 70vh;
	position: absolute;
	top: -100px;
	left:50px;
  }
  .left-image{
	opacity: .7;
	filter: brightness(80%);
	width: 95%;
	height: 70vh;
	transform: rotate(-60deg);
	position: absolute;
	top: 0px;
	left:-300px;
  }
  .right-image{
	opacity: .7;
	filter: brightness(80%);
	width: 95%;
	height: 70vh;
	transform: rotate(60deg);
	position: absolute;
	top: 0px;
	right:-300px;
  }

  .logo-div{
	justify-content: center;
	text-align: center;
  }
   .logo-paner{
	text-align: center;
	 margin-top: -50px;
	 width: 100%;
	 display: block;

  }

  .h3-paner{
	all:unset !important;
	font-size:70px !important;
	font-weight: bold !important;
	/* line-height: -20px !important; */
	padding: 0 !important;
  }
  .content{
	text-align: center !important;
	width: 60% !important;

  }
  .main-panel:hover .mid-image{
	animation: imageMove 2s linear 2;
  }

  @keyframes imageMove {
	0%, 100% {
	  transform: translateX(0);
	}
	50% {
	  transform: translateX(-10px);
	}
  }
  /* .sub-title{
	all:unset !important;
  } */
  /* .about-pra{
	all:unset !important;
  } */

  /* section{
	margin-bottom: 70px;
  } */

/*Small devices (landscape phones, 576px and up)*/
/*@media (max-width: 575px) {*/
/*	.main-panel .content{*/
/*		width: 90% !important;*/
/*	}*/
/*	.logo-paner{*/
/*		margin-top: 0px;*/
/*	}*/
/*	.h3-paner{*/
/*		font-size:50px !important;*/
/*	}*/
/*	.features-imag{*/
/*		flex:0;*/
/*	}*/

/*}*/


/*start happy clients section styles*/
*{
  margin: 0;
  padding: 0;
  font-family: "montserrat",sans-serif;
}
.testimonials{
  padding: 40px 0;
  background: #f1f1f1;
  color: #434343;
  text-align: center;
}
.inner{
  max-width: 1200px;
  margin: auto;
  overflow: hidden;
  padding: 0 20px;
}

.border{
  /*width: 160px;*/
  /*height: 5px;*/
  /*background: #17a2b8;*/
  /*margin: 26px auto;*/
}

.roww{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.coll{
  flex: 33.33%;
  max-width: 33.33%;
  box-sizing: border-box;
  padding: 15px;
}
.testimonial{
  background: #fff;
  padding: 30px;
}
.testimonial img{
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
.name{
  font-size: 20px;
  text-transform: uppercase;
  margin: 20px 0;
}
.stars{
  color: #17a2b8;
  margin-bottom: 20px;
}


@media screen and (max-width:960px) {
.col{
  flex: 100%;
  max-width: 80%;
}
}

@media screen and (max-width:600px) {
.col{
  flex: 100%;
  max-width: 100%;
}
}

/*end happy clients section styles*/



 /*Medium devices (tablets, 768px and up)*/
@media  (max-width: 767px) {
	.main-panel .content{
		width: 90% !important;
	}
	.logo-paner{
		margin-top: 0px;
	}
	.h3-paner{
		font-size:50px !important;
	}
	.features-imag{
		flex:0;
	}
	.services-pra
	{
		font-size: 30px;
		padding: 10px 20px;
	}
	.flip-card{
		position: fixed;
	}

	.career-h3-div{
		padding:10px 5px 5px 5px;
	}
	.career-p-div{
		padding:5px;
	}
	.career-pra{
		font-size: 40px;
		padding: 10px 30px;
	}
	.career-card-first{
		height: 300px;
	}
	.btn-div button{
		position: absolute;
		top: -90px;
		left: 30%;
	}
	/*.btn-lg{*/
	/*	padding: 0.5rem .5rem;*/
	/*	font-size: 1rem;*/
	/*	line-height: 1;*/
	/*	border-radius: 0.3rem;*/
	/*}*/
	.btn-div h4{
		top: 220px;
		/*left: 50px;*/
		font-size:xx-large;
	}

}

/*// Large devices (desktops, 992px and up)*/
@media (min-width: 768px) and (max-width: 991px){
	/*.main-panel*/
	.main-panel .content{
		width: 90% !important;
	}
	.logo-paner{
		margin-top: 0px;
	}
	.h3-paner{
		font-size:60px !important;
	}
	.features-imag{
		flex:0;
	}
	/*fetuer*/
	.header-par{
		margin-top: 40px;
		font-size: 40px;
		padding: 0px 20px;
		font-weight: bold;
	}
	/*career*/
	.career-pra{
		font-size: 50px;
		padding: 10px 40px;
	}
	.career-h3-div{
		padding:10px 5px 5px 5px;
	}
	.career-p-div{
		padding:5px;
	}
	.career-card-first{
		height: 300px;
	}
	.btn-div button{
		position: absolute;
		top: -90px;
		left: 30%;
	}
	.btn-lg{
		padding: 0.5rem .5rem;
		font-size: 1rem;
		line-height: 1;
		border-radius: 0.3rem;
	}
	.btn-div h4{
		top: 220px;
		/*left: 50px;*/
		font-size:large;
	}
}

/*// Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) { }