body{
	font-family:"poppins", sans-serif; 
	height: 100%;
	width: 100%; 
	margin: 0;
}  

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300&family=Pavanam&family=Quicksand:wght@300&display=swap');





/*styling for animation */
.loader{
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
} 
.loads{
	height: 100px;
	width: 100px;
	opacity: 1;
	animation: opaque 2s; 
}

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

.main_show{
	opacity: 1;
	animation: opaque 3s;
}

 
/* styling for animation ends*/






















.resp_nav{
   	display: none;
}  
.navbar{
	height: 10vh;
	background: #0e1d34;
}
.navbar img{
	height: 3vh;
	width: 27vh;	
	margin-top: 3vh;
}
.navbar a{
	text-decoration: none;
	color: #f2f2f2;
	transition: 0.3s ease-in-out;	
	margin-top: 2vh;
}
.navbar-nav li>a:hover{
	background: none;
}
.navbar-right a:hover{
	color: #fff;
	transition: 0.3s ease-in-out;
}
.active a{
	color: #fff;
	font-weight: bold;
}





/* styling for landing page */

.landing{
	margin-top: 8vh;
	height: 60vh;
	background: linear-gradient(rgba(14, 29, 52, 0.6), rgba(14, 29, 52, 0.6)), url(../img/bg.jpg);
	background-position: center;
	background-size: cover;
	color: white;
} 
.landing span{
	color:#d3852d;
}
.landing p{
	font-size: 20px;
}
.landing h1{ 
	font-size: 50px; 
	font-weight: bold;
	margin-top: 10vh;
}
.landing img{  
	margin-top: 10vh;
}
.track-form{
	width: 80%;
	height: 50px;
	padding: 5px 5px; 
	border-radius: 5px;
	background: white; 
	display: flex;
	margin-top: 5vh;
}
.track-form input{
	width: 80%;
	border: none;
	color: black;
	padding-left: 20px;
}
.track-form input:focus{
	outline: none;
}
.track-form button{
	text-decoration: none;
	color: white;
	background: #1146F6;
	padding: 10px 30px;
	border: none;
	width: 20%;
	border-radius: 5px;
	font-size: 15px;
	transition: 0.3s ease-in-out; 
}
.track-form button:hover{
	background: #4873FF;
	transition: 0.3s ease-in-out;
}  

 




 


/* styling for about begins */
.about{ 
	padding: 20px;
	padding-bottom: 10vh; 
}
.about h3{
	font-weight: bold;
	margin-top: 5vh;
	color: #0e1d34;
} 





.services h1{
	font-weight: bold;
	color: #0e1d34;
}/*
.services h1:after{
	content: "";
	width: 50px; 
	height: 2px;
	background: #1146F6;
	display: block;
	margin-top: 10px; 
}*/
.services .col-sm-4{
	margin-top: 3vh;
}
.serve{
	width: 100%;
	height: 450px;
	border: 1px solid lightgrey;
}
.serve .one{
	height: 60%;
}
.one img{
	height: 100%;
	width: 100%;
	object-fit: cover;
}
.serve h3{
	font-size: 20px;
	font-weight: bold;
	color: #0e1d34;
}
.serve .two{
	height: 40%;
	padding: 20px;
}
.serve .three{
	height: 80%;
}

.three img{
	height: 100%;
	width: 100%;
	object-fit: cover;
}
.serve .four{
	height: 20%;
}

.notice{
	margin-top: 5vh;
	height: 40vh;
	padding: 50px 20px;
	background: linear-gradient(rgba(14, 29, 52, 0.7), rgba(14, 29, 52, 0.7)), url(../img/logistics-service.jpg);
	background-position: center;
	background-size: cover;
	color: white;
} 
.notice h1{
	font-weight: bold;
}
.notice p{
	width: 60%;
	font-size: 17px;
	font-weight: lighter;
}
.notice a{
	padding: 10px 30px;
	text-decoration: none;
	color: white;
	border: 3px solid white;
	border-radius: 5px;
	margin-top: 5vh;
	font-size: 18px;
	transition: 0.3s ease-in-out;
}
.notice a:hover{
	background: #1146F6;
	border: 3px solid #1146F6;
	transition: 0.3s ease-in-out;
}


.features{
	margin-top: 7vh;
}
.features h2{
	font-weight: bold;
	color: #0e1d34;
}
.features p{
	margin-top: 2vh;
}
.features span{
	color: #1146F6;
	margin-right: 1vh;
}



.footer{
	background: #0e1d34;
	padding: 50px 20px;
	margin-top: 10vh;
	color: white;
}
.footer li{
	list-style: none;
}
.footer a{
	text-decoration: none;
	color: grey;
}
.footer a:hover{
	color: white;
}
.footer h2{
	font-weight: bold;
}








/* styling for other landing page */

.land-options{
	margin-top: 8vh;
	height: 30vh;
	background: #0e1d34;
	color: white;
} 
.land-options h1{
	font-weight: bold;
	text-align: center;
	font-size: 50px;
	margin-top: 10vh;
}
.linkage{
	padding: 20px;
	background: lightgrey;
}

.abt-text{
	margin-top: 6vh;
}
.abt-text h1{
	color: #1146F6;
	font-weight: bold;
}

.mission{
	display: flex;
}
.mission div:nth-child(1){
	width: 10%;
	padding: 10px;
}
.mission div:nth-child(2){
	width: 90%;
	padding: 10px;
}
.mission img{
	width: 100%;
	width: 100%;
	margin-top: 1vh;
}
.mission h4{
	font-weight: bold;
	color: #0e1d34;
}

.achieve{
	text-align: center;
	margin-top: 5vh;
	margin-bottom: 7vh;
}
.achieve h1{
	font-size: 50px;
	font-weight: bold;
	color: #0e1d34;
}




.contact{
	margin-top: 10vh;
}
.contact li{
	list-style: none;
	margin-top: 2vh;
}
.contact input{
	border: 1px solid lightgrey;
	border-radius: 3px;
	padding: 10px 20px;
	width: 100%;
}
.contact textarea{
	border: 1px solid lightgrey;
	border-radius: 3px;
	padding: 10px 20px;
	width: 100%;
}
.contact button{
	background: #1146F6;
	border: none;
	color: white;
	border-radius: 6px;
	padding: 10px 30px;
	font-size: 17px;
}

.card{
	display: flex;
}
.card div:nth-child(1){
	width: 15%;
	padding: 1px;
}
.card div:nth-child(2){
	width: 85%;
	padding: 1px;
}
.card span{
	font-size: 20px;
	margin-top: 1vh;
	background: #1146F6;
	padding: 10px;
	border-radius: 5px;
	color: white;
}
.card h4{
	font-weight: bold;
	color: #0e1d34;
}

.upload input:focus{
	outline: none;
}

.information{
	display: flex;
}
.information div:nth-child(1){
	width: 10%;
	padding: 1px;
}
.information div:nth-child(2){
	width: 90%;
	padding: 1px;
}
.information span{
	font-size: 20px;
	margin-top: 1vh;  
}
.information b{
	font-weight: lighter;
	color: grey;
}
.information p{
	font-weight: bold;
}

.info-box{
	width: 100%; 
	border: 1px solid lightgrey;
	border-radius: 3px;
}
.info-hold{
	padding: 20px;
}
.info-header{
	background: lightgrey;
	padding: 5px 20px;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
}
.black{
	background: black;
	color: white;
	padding: 5px 20px;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
}

.tracker .col-sm-4{
	margin-top: 4vh;
}







.tracking-container {
      background: #fff;
      width: 350px;
      padding: 20px 30px;
      border-radius: 15px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    .tracking-container h2{
    	margin-bottom: 5vh;
    }
    .timeline {
      position: relative;
      margin-top: 20px;
      margin-left: 20px;
    }

    .timeline::before {
      content: '';
      position: absolute;
      left: 10px;
      top: 0;
      height: 100%;
      width: 2px;
      background: #d0d0d0;
    }

    .status {
      position: relative;
      padding-left: 40px;
      margin-bottom: 30px;
    }

    .status:last-child {
      margin-bottom: 0;
    }

    .status::before {
      content: '';
      position: absolute;
      left: 3px;
      top: 5px;
      height: 14px;
      width: 14px;
      border-radius: 50%;
      background: #d0d0d0;
      border: 2px solid #fff;
      z-index: 2;
    }

    .status.active::before {
      background: #4CAF50;
      box-shadow: 0 0 0 3px #d7f7df;
    }

    .status.completed::before {
      background: #4CAF50;
    }

    .status p {
      margin: 0;
      font-weight: 500;
    }

    .status small {
      color: #777;
    }