.container{
	width:100%;
}

.row{
	display:block ruby;
}

.col-lg-12 {
	width: 100%;
}

.col-lg-11 {
	width: 91.66666667%;
}

.col-lg-10 {
	width: 83.33333333%;
}

.col-lg-9 {
	width: 75%;
}

.col-lg-8 {
	width: 66.66666667%;
}

.col-lg-7 {
	width: 58.33333333%;
}

.col-lg-6 {
	width: 50%;
}

.col-lg-5 {
	width: 41.66666667%;
}

.col-lg-4 {
	width: 33.33333333%;
}

.col-lg-3 {
	width: 25%;
}

.col-lg-2 {
	width: 16.66666667%;
}

.col-lg-1 {
	width: 8.33333333%;
}

.col-lg-12,.col-lg-11,.col-lg-10,.col-lg-9,.col-lg-8,.col-lg-7,.col-lg-6,.col-lg-5,.col-lg-4,.col-lg-3,.col-lg-2,.col-lg-1 {
	float:left;
}

@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro');

html{
	scroll-behavior: smooth; 
}

#display-mobile{
	display: none;
}

#display-system{
	display: unset;
}

marquee{
	font-size:1.5em;
	padding: 0px;
	font-weight: 800;
	background: #d8d8d8;
	
}

.logo{
	height: 63px;
	padding: 0px;
}

.topnav {
  overflow: hidden;
  background-color:#002366;
  color: #333;
}

.topnav a:nth-child(1){
  padding: 0px;
}

.topnav a {
  float: left;
  display: block;
  color: #333;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  font-weight: 800;
  color: white;
}

.topnav a:nth-child(2){
	float: right;
}

.topnav a:nth-child(3){
	float: right;
}

.topnav a:nth-child(4){
	float: right;
}

.topnav a:nth-child(5){
	float: right;
}

.topnav a:hover {
   text-decoration: none;
   color: #333;
}

#cust-info{
  border-top: 2px solid white;
}

#cust-info .topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  font-weight: 800;
  border: 1px solid grey;
}


.topnav a.active {
  background-color: #00cffb;
  color: #333;
}

.topnav a:hover {
  color: #ffcc00;
}

.topnav .icon {
  display: none;
}


.index .navbar{
	margin-bottom: 8px;
	border-radius: 0px;
	position: fixed;
	width: 100%;
	z-index: 1;
	padding: 0px;
}

.navbar-right{
	float: right;
}

.nav-bg{
	background-color: #00cffb;
}

.navbar-right a{
	margin-left: 20px;
	font-size:1.2em;
}

.index .navbar-light .navbar-nav .active > .nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show > .nav-link {
	color: #262c33;
}

#nav-store-name{
	float: initial;
	font-size: 1.8em;
	letter-spacing: 4px;
}

.awesome {
    width:100%;	
	margin: 10px auto;
	text-align: center;	
	color:#05986f;
	font-weight: 800;
	position: absolute;
	padding: 0px;
}

#welcome-note{
	text-align: center; 
	font-family:Adobe Fan Heiti Std B;	
	margin-top: 10px;
}

#we-are, #feature{
 font-family:Adobe Fan Heiti Std B;	
 margin-top: 10px;
 /* position: relative; */
 /* top: 50px; */
 
}

#we-are h4, #we-are h3{
	text-transform: uppercase; 
}
#we-are h4{
	color: grey;
}

#we-are h3{
	margin-top: 6px;
}

#we-are p{
	margin-top: 15px;
	font-size: 1.1em;
	line-height: 2;
}
#feature .fa-2x{
	font-size: 3em;
	margin-right: 15px;
	padding: 25px 0px 25px 2px;
}

.fa{
	/* border: 1px solid #d2d1d1; */
	border-radius: 20px;
	padding: 7px;
	text-align: center;
	/* color: #ffd526; */
}



i:hover{
	transition: all .3s ease-in-out;
	border-color: transparent;
}

#feat{
	margin-left: 12px;
	margin-top: 6px;
}

#feat h4{
	margin: 2px;
	text-transform: uppercase;
	font-weight: 800;
}

#feat div:nth-child(2) {
	margin-top: 14px;
}

#feature{
	cursor: default;
}

#feature:hover .fa-truck{
	color: #ffcc00;
	background-color: ;
}


#feature:hover .fa-leaf{
	color: #33cc33;
	background-color: ;
}

#feature:hover .fa-shield-alt{
	color: #00ace6;
	background-color: ;
}

#feature:hover .fa-user{
	color: #e62e00;
	background-color: ;
}

.feat1{
	margin-top: 30px;
}

.feat2{
	position: relative;
	top: 30px;
}

#count .fa-1x {
	font-size: 1.1em;
}

#about .home-page-mid-menu ul{
	display: block ruby;
	list-style: none;
	font-family:;
}

#about .home-page-mid-menu {
	margin-left: 0px;
	margin-top: 30px;
}

#about .home-page-mid-menu{
	font-size: 2em;
	padding: 60px 0px 30px 0px;
	background-color: black /*#333*/;
	color: #FFFF;	
	font-weight: bold;	 
}

#about .home-page-mid-menu 
nav ul li,
nav ul li:after,
nav ul li:before {
  transition: all .5s;
}

#about nav ul li:hover {
  color: #ffcc00;
}

#about nav.stroke ul li a,
nav.fill ul li a {
  position: relative;
}
#about nav.stroke ul li a:after,
nav.fill ul li a:after {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 0%;
  color: white;
  background: white;
  height: 1px;
}
#about nav.stroke ul li a:hover:after {
  width: 100%;
}

#about #ribbon-section{
	margin-left: 12px;
}
#about nav .fas{
	color: #ffcc00;
}
#about .home-page-mid-menu li:nth-child(1) {
  text-align: center;
}
#about .home-page-mid-menu li:nth-child(2) {
  text-align: center;
}

.side-banner img{
	padding: 0px;
	margin: 0px;
	float: right;
}

.service{
	margin-top: 20px;
	font-size: 1.2em;
	line-height: 2;
}

.service-list{
	margin-top: 10px;
}

.service p{
	margin-top: 15px;
	padding: 15px;
}

.service i{
	padding: 0px;
	margin-right: 10px;
}

.serv{
	cursor: pointer; 
}

.serv:hover i {
	color: yellow;
}

.fa-caret-square-right{
	color: #00cffb;
}

.fa-caret-square-right:hover{
	color: #ffcc00;
}

.home-page-mid-menu ul{
	display: block ruby;
	list-style: none; 
}

.count-mobile{
	display: none;
}

#option{
	color: black;
	text-transform: capitalize;
}

#display-system .btn{
	background: white;	
	padding: 0px;
	margin-right: 10px;
	font-size: 1em;
	border: none;
}
.btn a:active{
	border: none;
}

#display-system .btn:hover{
	background: white;	
	padding: 0px;
	margin-right: 10px;
	font-size: 1em;
	border: none;
}


#display-system .btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, .show > .btn-secondary.dropdown-toggle {
    color: black;
    background-color: none;
    border: none;
}

.dropdown-menu .dropdown-item{
	width: 100%;
	white-space: revert;
}

#count .home-page-mid-menu {
	margin-left: 0px;
	margin-top: 22px;
}

#count .home-page-mid-menu{
	font-size: 2em;
	padding: 60px 0px 30px 0px;
	background-color: black /*#333*/;
	color: #FFFF;	
	font-weight: bold;
	border-top: 10px solid #33cc33;
}

#count .home-page-mid-menu 
nav ul li,
nav ul li:after,
nav ul li:before {
  transition: all .5s;
}

#count nav ul li:hover {
  color: #ffcc00;
}

#count nav.stroke ul li a,
nav.fill ul li a {
  position: relative;
}
#count nav.stroke ul li a:after,
nav.fill ul li a:after {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 0%;
  color: white;
  background: white;
  height: 1px;
}
#count nav.stroke ul li a:hover:after {
  width: 100%;
}

#count .ribbon-section{
	margin-left: 12px;
	text-transform: uppercase;
}
#count nav .fas{
	color: #33cc33;
} 

#count .home-page-mid-menu li{
	text-align: center;
}

#customer, #branch, #tip{
	color: white;
	font-size: 1.5em;
	margin-left: 40px;
}

#testimonial{
	padding: 24px 60px;
	margin: 2px 70px;
	text-align: center;
}

#testimonial img{
	 margin-top: 14px;
}

#testimonial p{ 
  quotes: """ """;
}

#section-heading{
	text-align: center;
	font-size: 2em;
	padding: 14px 0px 14px 0px;
	color: grey;	
	font-weight: bold; 
}
.testimonial-section{
	height: auto;
	background-image: linear-gradient(-90deg,#00d6ff, #097879 );
}

.gradient-text {
  background-color: white;
  background-image: linear-gradient(45deg, white);
  background-size: 100%;
  background-repeat: repeat;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; 
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
  font-size: 1.4em;
  line-height: 1.7;
  margin-top: 20px;
  font-style: italic;
}

.bottom-line{
	 border-bottom: 1px solid red;   
	 margin-bottom: 55px;
	 margin-right: auto;
	 margin-left: auto;
	 width:370px;
}


#time .home-page-mid-menu {
	margin-left: 0px;
	margin-top: 0px;
}

#time .home-page-mid-menu {
	font-size: 17px;
	background-color: #ffd526;
	padding: 60px 0px 30px 0px;
	font-weight: 700;
	border-top: 10px solid #00cffb;
}

#time .home-page-mid-menu 
nav ul li,
nav ul li:after,
nav ul li:before {
  transition: all .5s;
}

/* #time li:hover { */
  /* color: ; */
/* } */

#time nav.stroke ul li a,
nav.fill ul li a {
  position: relative;
}
#time nav.stroke ul li a:after,
nav.fill ul li a:after {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 0%;
  color: white;
  background: white;
  height: 1px;
}
#time nav.stroke ul li a:hover:after {
  width: 100%;
}

#time span{
	margin-left: 6px;
	text-transform: uppercase;
	color:  #262c33;
	font-family: Roboto Condensed;
}
#time nav .fas{
	color: #262c33;
	font-size: 0.7em;
} 

#time .home-page-mid-menu li{
	text-align: center;
}

#time #store-time {
	position: relative;
	left: 8px;
	text-transform: unset;
	font-weight: normal;
}

.contactus-area div {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
  margin-bottom: 25px;
  margin-top: 12px;
}
.contactus-area  label{
  font-size: 1.35em;
  margin-bottom: 0px;
}

.contactus-area .col-lg-8{
	margin-bottom: 12px;
}

form .col-lg-12{
	margin-top: -20px;
}

textarea[type=message]{
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  height: 130px;
}

input{
  width: 100%;
  padding: 12px 20px;
  margin: 8px 14px;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type=submit] {
  width: 25%;
  background-color: #1882b5;
  color: white;
  /* padding: 14px 20px; */
  /* margin: 8px 45px 1px 95px; */
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1.35em;
  position: relative;
  right: 330px;
}

input[type=submit]:hover {
  background-color: #093d55;
}

/* #captcha-code{ */
	/* border: 1px soild black; */
	/* padding-left: 22px; */
	/* padding-right: 22px; */
	/* padding-top: 10px; */
	/* padding-bottom: 10px; */
	/* background-color: black; */
	/* color: white; */
	/* font-size: 1.25em; */
	/* width: 10%; */
	/* text-align: center; */
	/* margin-bottom:0px; */
	/* margin-left: 14px; */
	/* margin-top: 44px; */
	/* display: inline; */
	/* letter-spacing: 8px; */
/* } */

/********* MEDIA QUERIES **********/

@media only screen and (max-width: 1060px){
	#about .home-page-mid-menu{
		font-size: 1.6em;
	}
	
	#customer, #branch, #tip{
		font-size: 1.2em;
	}
	
	#count .home-page-mid-menu{
		font-size: 1.8em;
	}
	input[type=submit] {
	  right: 250px;
	}
}

@media only screen and (max-width: 993px){
	#about .home-page-mid-menu{
		font-size: 1.4em;
	}
	
	.side-banner img{
		display: none;
	}
	
	#feature-mobile .col-lg-12 {
		width: 100%;
	}

	#service-mobile .col-lg-12 {
		width: 100%;
	}
	
	.contactus-area .col-lg-12 {
		width: 100%;
	}

	.col-lg-6 {
		width: 50%;
	}
	 
	#we-are{
		text-align: center;
	}
	input[type=submit] {
		right: -350px; 
	}
	
	nav .topnav a:not(:first-child) {
		display: none;
	}
	nav .topnav a.icon {
		float: right;
		display: block;
	}
	
	nav .topnav.responsive {
		position: relative;
	}
	
	nav .topnav.responsive .icon {
		position: absolute;
		right: 0;
		top: 0;
	}
	nav .topnav.responsive a {
		float: none;
		display: block;
		text-align: left;
	}
	
}

@media only screen and (max-width: 888px){
	input[type=submit] {
		right: -315px; 
	}
	
	#time .home-page-mid-menu{
		font-size: 15px;
	}
	
	#testimonial{
		padding: 24px 8px;
		margin: 2px 40px;
		text-align: center;
	}
	
	#display-mobile{
		display: unset;
		margin-left: 35px;
	}
	
	#display-system{
		display: none;
	}
	
	#display-mobile .col-lg-6 {
		width: 50%;
	}
	
	#option{
		color: black;
	}

	#display-mobile .btn{
		background: white;	
		padding: 0px;
		margin-right: 10px;
		font-size: 1em;
		border: none;
	}
	.btn a:active{
		border: none;
	}

	#display-mobile .btn:hover{
		background: white;	
		padding: 0px;
		margin-right: 10px;
		font-size: 1em;
		border: none;
	}


	#display-mobile .btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, .show > .btn-secondary.dropdown-toggle {
		color: black;
		background-color: none;
		border: none;
	}

	.dropdown-menu .dropdown-item{
		width: 100%;
		white-space: revert;
	}

}

@media only screen and (max-width: 793px) {
	.feat-explain{
		margin-bottom: 14px;
	}
	
	#about .home-page-mid-menu {
		margin-top: 35px;
		padding: 25px 0px 26px 0px;
	}
	.home-page-mid-menu .col-lg-12 {
		width: 100%;
	}
	
	#display-mobile{
		display: unset;
		margin-left: 35px;
	}
	
	#display-system{
		display: none;
	}
	
	#display-mobile .col-lg-6 {
		width: 50%;
	}
	
	#about .home-page-mid-menu li:nth-child(3) {
	  text-align: center;
	}
	
	#about li{
		margin-left: 12px;
		font-size: 1.5em;
		line-height: 2.4;
	}

	#count .home-page-mid-menu {
		padding: 30px 0px 30px 0px;
	}
	
	#count li{
		margin-left: 12px;
		font-size: 1.2em;
		line-height: 2.4;
	}

	#count br{
		display: none;
	}
	
	
	#time .home-page-mid-menu {
		padding: 30px 0px 30px 0px;
	}
	
	#time li{
		margin-left: 12px;
		font-size: 1.5em;
		line-height: 2.4;
	}
	
	#time br{
		display: none;
	}
	
	#customer, #branch, #tip{
		font-size: 1em;
		margin-left: 12px;
	}
}

@media only screen and (max-width: 728px){
	input[type=submit] {
		right: -242px; 
	}
	#about li{
		font-size: 1.2em;
		margin-left: -13px;
	}
	#count li{
		font-size: 1.2em;
		margin-left: -13px;
	}
	#time li{
		font-size: 1.2em;
		margin-left: -13px;
	}
}

@media only screen and (max-width: 646px){
	input[type=submit] {
		right: -125px; 
		width: 50%;
	}
	
	.feat1 .col-lg-12{
		width: 100%;
	}

	.feat2 .col-lg-12{
		width: 100%;
	}
	em{
		font-size: 0.9em;
	}
}

@media only screen and (max-width: 634px){
	#display-mobile .col-lg-12{
		width: 100%;
	}
	
	#display-mobile {
		margin-left: -3px;
		margin-top: auto;
		line-height: 2.9;
	}
	
	#display-mobile{
		margin-left: -3px;
	}
	
}

@media only screen and (max-width: 548px){
	#about li{
		font-size: 1.2em;
		margin-left: -13px;
	}
	
	input[type=submit] {
		right: -115px; 
		width: 50%;
	}	
		
	#display-mobile .col-lg-12{
		width: 100%;
	}
	
	#display-mobile {
		margin-left: -3px;
		margin-top: auto;
		line-height: 2.9;
	}
	
	#display-mobile{
		margin-left: -3px;
	}
	
	#count li{
		font-size: 1.2em;
		margin-left: -13px;
	}
	
	#time li{
		font-size: 1.2em;
		margin-left: -13px;
	}
}

@media only screen and (max-width: 501px){
	input[type=submit] {
		right: -94px; 
		width: 50%;
	}	
	
	form .col-lg-12{
		width: 100%;
	}
}


@media only screen and (max-width: 424px){
	#count .col-lg-6 {
		width: 50%;
	}
		
	input[type=submit] {
		right: -55px; 
		width: 60%;
	}
	
	#welcome-note{
		font-size: 27px;
	}
	
	#count .home-page-mid-menu li{
		font-size: 1em;
	} 
	.contactus-area .col-lg-12 {
		width: 105%;
	}
	.contactus-area .col-lg-8 {
		margin-bottom: 12px;
		margin-left: -32px;
	}
	textarea[type=message]{
		width: 93%;
		margin-left: -12px;
	}
}

@media only screen and (max-width: 384px){
	input[type=submit] {
		right: -55px; 
		width: 60%;
	}
	
	#count .home-page-mid-menu li{
		font-size: 1em;
	} 
	.contactus-area .col-lg-12 {
		width: 105%;
	}
	.contactus-area .col-lg-8 {
		margin-bottom: 12px;
		margin-left: -32px;
	}
	textarea[type=message]{
		width: 93%;
		margin-left: -12px;
	}
	
	#count li{
		font-size: 1em;
		margin-left: -13px;
	}
	
	#time li{
		font-size: 1em;
		margin-left: -13px;
	}	
}

@media only screen and (max-width: 370px) {
	input[type=submit] {
		right: -35px; 
		width: 60%;
	}
}

@media only screen and (max-width: 338px) {
	input[type=submit] {
		right: -35px; 
		width: 60%;
	}
	
	#time li{
		font-size: 0.9em;
		margin-left: -13px;
	}
		
	#testimonial {
		padding: 24px 0px;
		margin: 2px 14px;
		text-align: center;
	}
	
	#count .fa-1x {
		font-size: 0.9em;
	}
	
	#customer, #branch, #tip {
		margin-left: 8px;
	}
}

@media only screen and (max-width: 332px){
	.service p {
		margin-top: 15px;
		padding: 5px;
	}
	
	#feat{
		margin-left: 57px;
	}
	
	#about .home-page-mid-menu{
		font-size: 1.2em;
	}
}

@media only screen and (max-width: 305px){
	
	#time li{
		font-size: 0.7em;
		margin-left: -13px;
	}
	
	#count .home-page-mid-menu li{
		font-size: 0.7em;
	}
	
	#customer, #branch, #tip {
		font-size: 0.8em;
	}
}

@media only screen and (max-width: 280px){
	
	#time li{
		font-size: 0.6em;
		margin-left: -13px;
	}
}

@media only screen and (max-width: 265px){
	
	#time li{
		font-size: 0.4em;
		margin-left: -13px;
	}
}