html{
  scroll-behavior: smooth;
}
body{
		 font-family: "Muli", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 17px;
    font-weight: 400;
    line-height: 1.5;
}

.clr{color:#a32cc4;}
.topbar{
	background: #a32cc4;/*  #08406f;*/
	padding: 5px 0px;
}

.topbar a{
	color:#ffffff;
	display: inline-block;
	margin-right: 20px;
	font-size: 15px;
}

.social{
	text-align: right;
}



.menubar{
	margin-bottom: 0;
	border-radius: 0;
	border:0;
	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.25);
	padding: 5px;
}


.menubar .nav li a{
color:#333333;
margin-top: 5px;
}

.menubar .nav li a:hover{
	background: #ffde00;
	color:#333333;
}

.menubar .navbar-brand{
   color:#007aee;
}

.navbar-header{
	padding-top: 3px;
}

.logo{
	width: 225px;
}


.dropdown:hover .dropdown-menu{
	display: block;
	left: 0 !important;
	min-width: 290px;
	border: 0;	
}

.dropdown-menu li{
	min-width: 290px;
	
	display: block;
	border-bottom: 1px dashed #ccc;
}

.dropdown-menu li a{
font-size: 16px;
word-wrap: break-word;
 white-space: pre-wrap;       /* css-3 */
 white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -o-pre-wrap;    /* Opera 7 */
 word-wrap: break-word; 

}	


.banner{
	padding: 0;
}

.banner img{
	width: 100%;
}

.cats{
	margin-top: 0px;
}

.cats p{
	font-weight: bold;
	font-size: 15px;
	margin-bottom: 5px;	/*background: #ffde00;*/
	margin-top: 0px;
	border-bottom: 1px dashed #ccc;
}

.cats p a{
	color:#333;
	text-decoration: none;
	display: block;
	outline: none;
	padding: 5px 10px;
}
.cats p a:hover{
background: #a32cc4;
color: #ffffff;
}	



.cats p i{
margin-right: 10px;

}

#cat2{display: none;}

#cat2 select{
	width: 100%;
	height: 35px;
	padding-left: 10px;
}

.pros{
	margin-top: 20px;
	margin-bottom: 50px;

}

.pros img{
	width: 150px;
	max-width: 150px;
	max-height: 150px;
}

.pro{
	margin-top: 10px;
	margin-bottom: 20px;
	padding: 10px;
	border:1px solid #ccc;
	text-align: center;
	/*background-color: hsla(0,0%,84.7%,.34);*/
}
.pro a{
	color:#000;
	text-decoration: none;
}

.pro .title{
	background: #ffde00;
	padding: 10px 5px;
	font-weight: bold;
	margin-bottom: 0;
	font-size: 15px;
}

.head{
	font-weight: bolder;
	text-align: center;
	margin-bottom: 30px;
}
.head span{
   display: block;
   background:  #ffde00;
   height: 5px;
   width: 100px;
   margin-left: auto;
   margin-right: auto;
   margin-top: 10px;
}

.sub{
	font-weight: bolder;
	font-size: 20px;
}

.map{
	margin-top: 30px;
}

.con-detail{
	margin-top: 30px;
	border:1px solid  #a32cc4;
	min-height: 90px;
	padding-left: 40px;
	position: relative;
	border-radius: 10px 0 0 10px;
}

.con-detail i{
position: absolute;
left:0px;
top:0px;
font-size: 24px;
background: #a32cc4;
color:#ffffff;
height: 90px;
width: 40px;
padding-top: 30px;
border-radius: 10px 0 0 10px;
}


.con-detail p{
  margin-bottom: 0;
  padding: 5px 15px;
  padding-bottom: 0;
}	

.con-detail h3,h4{
/*padding: 0px 15px;
margin-top: 10px;*/
}

.nos h4{
	font-weight: bold;
	margin-bottom: 5px;
   margin-top: 15px;	
}

.form{
	margin-top: 20px;
}

.form input{
	width: 100%;
	height: 40px;
	margin-bottom: 15px;
	padding-left: 10px;
	margin-top: 5px;
}

.form textarea{
	width: 100%;
	height: 100px;
	margin-bottom: 15px;
	padding-left: 10px;
	margin-top: 5px;
}

.form input[type="submit"]{
	background: #a32cc4;
	color:#ffffff;
	border:0;
	font-weight: bold;
}	

.abt{
	margin-top: 50px;
}

.abt .head{
	margin-bottom: 30px;
}

.brands{
	margin-top: 50px;
}

.brands img{
	margin-bottom: 15px;
	margin-top: 15px;
}


.footer{
	background: #3e014f; /*#012b4f;*/
	color:#ffffff;
	padding-top: 30px;
	padding-bottom: 30px;
	margin-top: 50px;
}

.footer img{
	width: 250px;

}

.footer p{
	font-size: 14px;
	line-height: 25px;
}

.footer .nav li a{
  color:#ffffff;
  font-size: 14px;
  padding: 5px 10px;
}

.footer .nav li a:hover{
	background: #ffde00;
  color:#012b4f;

}

.footer a{
	color:#ffffff;
}

.soc a{
	color:#012b4f;
	display: inline-block;
	font-size: 22px;
	margin-top: 10px;
	margin-right: 15px;
	background: #ffde00;
	width: 40px;
	height: 40px;
	border-radius: 50%;

	text-align: center;
	padding-top: 9px;
}

.soc a:hover{
background: #ffffff;
}

.footer .copy{
	font-size: 14px;
	margin-top: 15px;
	text-align: center;
}

.footer .copy a:hover{
  color:#ffde00;
}	



.button{
	background: #a32cc4;
  color:#ffffff; /*#012b4f;*/
  text-decoration: none;
  padding: 10px 15px;
  display: inline-block;
  font-weight: bold;
}

.button:hover{
  text-decoration: none;
   color:#ffffff; /*#012b4f;*/
}

.gallery img{
	width: 100%;
	padding: 5px;
	border:1px solid #a32cc4;
	height: 198px;
}

.imgs p{
	position: absolute;
	width: 95%;
	text-align: center;
	bottom: 0;
	opacity: 0;
	transition: 0.5s;
}

.imgs p span{
	background:  #a32cc4;
	color:#ffffff;
	padding: 10px 20px;
	display: inline-block;
	border:2px solid #ffffff;
	font-weight: bolder;
}

.imgs:hover p{
	bottom: 75px;
	opacity: 1;
}

.imgs:hover img{

}

.blogo{
	width: 100%;
	max-height: 102px;
	height: 102px;
}

.footer .chat{
	background: #25d366;
	color:#ffffff;
	padding: 10px 20px;
	border-radius: 5px;
	text-decoration: none;
	font-size: 18px;
	font-weight: bold;
	outline: none;
	margin-top: 10px;
	display: inline-block;
}

.footer .chat:hover{
 text-decoration: none;
}	


.clients{
	/*color:#ffffff;*/
	margin-top: 50px;
	background:  #f2e6ff;
	/*background-image: linear-gradient(to right, #a32cc4,#00aeef );*/
	padding: 0;
	padding-top:25px;
	padding-bottom: 25px; 
}

@media(max-width: 480px){
	.topbar .container{
		padding: 0;
		text-align: center;
	}
	.topbar .col-md-6{
		padding: 5px;
	}
	.topbar a{
		font-size: 13px;
		padding-left: 0;
		padding-right: 0;
		display: inline-block;
		margin-right: 15px;
		text-decoration: none;
	}

	.topbar .social{
		display: none;
	}


	.abt{
		margin-top: 20px;
	}

	.con-detail h4{
		font-size: 15px;
	}

	#cat1{display: none;}
	#cat2{display: block;}

	#products{
		padding: 0;
	}

	#products .col-xs-6{
		padding-left: 5px;
		padding-right: 5px;
	}

	.pro .title{
		min-height: 53px;
		font-size: 13px;
	}

	.head{
		font-size: 24px;
	}

	.blogo{
	width: 100%;
	max-height: 70px;
	height: 70px;
	}

	.brands .nav{
		font-size: 15px;
		font-weight: bold;
	}
}


@media(max-width: 375px){
	.topbar .container{
		padding: 0;
		text-align: center;
	}
	.topbar .col-md-6{
		padding: 0px;
	}
	.topbar a{
		font-size: 13px;
		padding-left: 0;
		padding-right: 0;
		display: inline-block;
		margin-right: 10px;
		text-decoration: none;
	}

	.pros img{
	width: 100%;
	max-width: 100%;
	height: 140px;
   }


   	.con-detail{
      overflow: hidden;
   	}

   	.con-detail i{
   		height: 100px;

   	}
}