.card {
 /* margin-left:60px; */
  display: flex;
  height: 280px;
  width: 200px;
  background-color: white;
  border-radius: 10px;
  box-shadow: -1rem 0 3rem #000;
  margin-left: 0px; 
  transition: 0.5s ease-out;
  position: relative;
  left: 0px;
  float:left;
}

.card:not(:first-child) {
    margin-left: -50px;
}

.card:hover {
  transform: translateY(-20px);
  transition: 0.5s ease-out;
}

.card:hover ~ .card {
  position: relative;
  left: 50px;
  transition: 0.5s ease-out;
}

.title {
  color: white;
  font-weight: 300;
  position: absolute;
  left: 20px;
  top: 15px;
}

.bar {
  position: absolute;
  top: 100px;
  left: 20px;
  height: 5px;
  width: 150px;
}

.emptybar {
  background-color: #2e3033;
  width: 100%;
  height: 100%;
}

.filledbar {
  position: absolute;
  top: 0px;
  z-index: 3;
  width: 0px;
  height: 100%;
  background: white;
  background: linear-gradient(90deg, rgba(0,154,217,1) 0%, rgba(217,147,0,1) 65%, rgba(255,186,0,1) 100%);
  transition: 0.6s ease-out;
}

.card:hover .filledbar {
  width: 120px;
  transition: 0.5s ease-out;
}



.box{
	 	width: 100%; 
		height: 600px;
		padding: 40px 60px;
		color: white;
		font-family: sans-serif;
		text-align: center;
	}

	.section-1{
		  width: 100%; 
          height: 100vh;
          background-image: url(../images/wh.jpg);
          background-attachment: fixed;
          background-size: cover; 
	}

	.section-2{
		width: 100%; 
		background: #3c43a4;
		height:400px;
	}

	.section-3{
		width: 100%; 
		background-image: url(../images/001.jpg);
        background-attachment: fixed;
        background-size: cover;
	}


	.box p{
		font-size: 20px;
		margin-top: 100px;
	}

	.box h4{
		font-size: 50px;
		text-shadow:  0px 0px 5px #000;
	}
	
	
	
	#texxt{
		width: 50%;
		
	}
	
	
	
	
	
	
	/*--------------------------------------------------------------*/
.topnav {
  overflow: hidden;
  background-color: #333;
}

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

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #04AA6D;
  color: white;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}


div#slider {
	width: 100%;
	max-width: 1200px;
}

div#slider figure {
	position: relative;
	width: 500%;
	margin: 0;
	padding: 0;
	font-size: 0;
	text-align: left;
}
div#slider figure img {
	width: 20%;
	height: auto;
	float: left;
}

div#slider {
	width: 100%;
	max-width: 1400px;
	overflow: hidden; 
}

@keyframes slidy { 
	0%  { left: 0%; }
	20% { left: 0%; }
	25% { left: -100%; }
	45% { left: -100%; }
	50% { left: -200%; }
	70% { left: -200%; } 
	75% { left: -300%; }
	95% { left: -300%; }
	100% { left: -400%; } 
}

div#slider figure {
	position: relative;
	width: 500%;
	margin: 0;
	padding: 0;
	font-size: 0;
	left: 0;
	text-align: left;
	animation: 30s slidy infinite;  
}

.ml3 {
  font-weight: 900;
  font-size: 2.5em;
  color:black;
}



.ml11 {
  font-weight: 700;
  font-size: 2.5em;
  color: red;
}

.ml11 .text-wrapper {
  position: relative;
  display: inline-block;
  padding-top: 0.1em;
  padding-right: 0.05em;
  padding-bottom: 0.15em;
}

.ml11 .line {
  opacity: 0;
  position: absolute;
  left: 0;
  height: 100%;
  width: 3px;
  background-color: black;
  transform-origin: 0 50%;
}

.ml11 .line1 { 
  top: 0; 
  left: 0;
}

.ml11 .letter {
  display: inline-block;
  line-height: 1em;
}

 .container-fluid {
    padding: 60px 50px;
  }
  .bg-grey {
    background-color: #f6f6f6;
  }
.col-sm-8 h2{
	font-size: 29px;
	text-transform: uppercase; 
	color: #303030; 
	font-weight: 600; 
	margin-bottom: 30px;
}

.col-sm-8 h4{
	 font-size: 24px;
	 line-height: 1.375em;
	 color: #303030;
	 font-weight: 400; 
	 margin-bottom: 30px;
}

  #logo {
    color:#16096e;
    font-size: 200px;
	margin-left:40%;
	margin-top:40%;
  }
  
  .logo-small {
    color: #16096e;
    font-size: 50px;
  }
  
  
  
  
  
  
  
  .btn {
  border: 2px solid black;
  background-color: white;
  color: black;
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
}

/* Green */
.success {
  border-color: #04AA6D;
  color: green;
}

.success:hover {
  background-color: #04AA6D;
  color: white;
}



 .news ul{
            list-style-type:none;
            
        }
        
 .news ul li a{
            text-decoration:none;
            color:black;
            display:inline-block;
        }

  .news ul li a:hover{
            background-color:red;
            color:green;
        }
        .dropdown_list{
            background-color:lightgreen;
            position:absolute;
            display:none;
        }
        .dropdown_list a{
            display:block;

        }
        .dropdown:hover .dropdown_list{    
            display:block;
        }



/* Buttons for intel core 2 duo */

.simpleCart_shelfItem button.w3ls-carti, button.w3ls-cartsi,  button.am,  button.am1,  button.am2,  button.am21,  button.am3,  button.am31,  button.am4,  button.am41,  button.am5,  button.am51,  button.am6,  button.am61,  button.am7,  button.am71,  button.am8,  button.am81,  button.am9,  button.am91,  button.am10,  button.am101,  button.am11,  button.am111 
,button.d,  button.d1,  button.d2,  button.d21,  button.d3,  button.d31,  button.d4,  button.d41,  button.d5,  button.d51,  button.d6,  button.d61,  button.d7,  button.d71
,button.w,  button.w1,button.w2,  button.w21,button.w3,  button.w31, button.ph, button.ph1, button.ph2,  button.ph21,button.p,  button.p1,button.p2,  button.p21,button.p3,  button.p31, button.b, button.b1, button.sc, button.sc1, button.gp, button.gp1
,button.dvr,  button.dvr1,  button.dvr12,button.dvr2,  button.dvr21,button.dvr3,  button.dvr31, button.dvr4, button.dvr41, button.dvr5,  button.dvr51,button.dvr6,  button.dvr61,button.tab,  button.tab1,button.mb,  button.mb1, button.mbo, button.mbo1, button.ro, button.ro1, button.wm, button.wm1, button.mw, button.mw1, button.rf, button.rf1, button.ld, button.ld1, button.cc, button.cc1, button.cc2, button.cc21, button.cc3, button.cc31
,button.cyc,  button.cyc1, button.tm,  button.tm1
{
    font-size: 14px;
    color: #000;
    margin: 0;
    text-decoration: none;
    text-transform: capitalize;
    padding: .5em 1.5em;
    border: 1px solid #c1c1c1;
    border-radius: 5px;
    background: transparent;
    outline: none;
	-webkit-transition:.5s all;
	-moz-transition:.5s all;
	transition:.5s all;
}
.simpleCart_shelfItem button.w3ls-carti:hover, button.w3ls-cartsi:hover , button.am:hover , button.am1:hover,  button.am2:hover,  button.am21:hover,  button.am3:hover,  button.am31:hover,  button.am4:hover,  button.am41:hover,  button.am5:hover,  button.am51:hover,  button.am6:hover,  button.am61:hover,  button.am7:hover,  button.am71:hover,  button.am8:hover,  button.am81:hover,  button.am9:hover,  button.am91:hover,  button.am10:hover,  button.am101:hover,  button.am11:hover,  button.am111:hover
,  button.d:hover,  button.d1:hover,  button.d2:hover,  button.d21:hover,  button.d3:hover,  button.d31:hover,  button.d4:hover,  button.d41:hover,  button.d5:hover,  button.d51:hover,  button.d6:hover,  button.d61:hover,  button.d7:hover,  button.d71:hover
,button.w:hover,  button.w1:hover,button.w2:hover,  button.w21:hover,button.w3:hover,  button.w31:hover, button.ph:hover,  button.ph1:hover, button.ph2:hover,  button.ph21:hover,button.p:hover,  button.p1:hover,button.p2:hover,  button.p21:hover,button.p3:hover,  button.p31:hover, button.b:hover, button.b1:hover, button.sc:hover, button.sc1:hover, button.gp:hover, button.gp1:hover
,button.dvr:hover,  button.dvr1:hover,  button.dvr12:hover,button.dvr2:hover,  button.dvr21:hover,button.dvr3:hover,  button.dvr31:hover, button.dvr4:hover, button.dvr41:hover, button.dvr5:hover,  button.dvr51:hover,button.dvr6:hover,  button.dvr61:hover,button.tab:hover,  button.tab1:hover,button.mb:hover,  button.mb1:hover, button.mbo:hover, button.mbo1:hover, button.ro:hover, button.ro1:hover, button.wm:hover, button.wm1:hover, button.mw:hover, button.mw1:hover, button.rf:hover, button.rf1:hover, button.ld:hover, button.ld1:hover, button.cc:hover, button.cc1:hover, button.cc2:hover, button.cc21:hover, button.cc3:hover, button.cc31:hover
,button.cyc:hover,  button.cyc1:hover, button.tm:hover,  button.tm1:hover
{
	background:#3c43a4;
	color:#fff;
	border:1px solid #3c43a4;
}


 .simpleCart_shelfItem button.w3ls-carti:hover span, button.w3ls-cartsi:hover span, button.am:hover span, button.am1:hover span,  button.am2:hover span,  button.am21:hover span,  button.am3:hover span,  button.am31:hover span,  button.am4:hover span,  button.am41:hover span,  button.am5:hover span,  button.am51:hover span,  button.am6:hover span,  button.am61:hover span,  button.am7:hover span,  button.am71:hover span,  button.am8:hover span,  button.am81:hover span,  button.am9:hover span,  button.am91:hover span,  button.am10:hover span,  button.am101:hover span,  button.am11:hover span,  button.am111:hover span
  ,button.d:hover span,  button.d1:hover span,  button.d2:hover span,  button.d21:hover span,  button.d3:hover span,  button.d31:hover span,  button.d4:hover span,  button.d41:hover span,  button.d5:hover span,  button.d51:hover span,  button.d6:hover span,  button.d61:hover span,  button.d7:hover span,  button.d71:hover span
 ,button.w:hover span,  button.w1:hover span,button.w2:hover span,  button.w21:hover span,button.w3:hover span,  button.w31:hover span, button.ph:hover span,  button.ph1:hover span, button.ph2:hover span,  button.ph21:hover span,button.p:hover span,  button.p1:hover span,button.p2:hover span,  button.p21:hover span,button.p3:hover span,  button.p31:hover span, button.b:hover span, button.b1:hover span, button.sc:hover span, button.sc1:hover span, button.gp:hover span, button.gp1:hover span
 ,button.dvr:hover span,  button.dvr1:hover span,  button.dvr12:hover span,button.dvr2:hover span,  button.dvr21:hover span,button.dvr3:hover span,  button.dvr31:hover span, button.dvr4:hover span, button.dvr41:hover span, button.dvr5:hover span,  button.dvr51:hover span,button.dvr6:hover span,  button.dvr61:hover span,button.tab:hover span,  button.tab1:hover span,button.mb:hover span,  button.mb1:hover span, button.mbo:hover span, button.mbo1:hover span, button.ro:hover span, button.ro1:hover span, button.wm:hover span, button.wm1:hover span, button.mw:hover span, button.mw1:hover span, button.rf:hover span, button.rf1:hover span, button.ld:hover span, button.ld1:hover span, button.cc:hover span, button.cc1:hover span, button.cc2:hover span, button.cc21:hover span, button.cc3:hover span, button.cc31:hover span
 ,button.cyc:hover span,  button.cyc1:hover span, button.tm:hover span,  button.tm1:hover span
 {
	display:none;
 }

.simpleCart_shelfItem button.w3ls-carti:hover:before{
  content:"Rs.800";
}

.simpleCart_shelfItem button.w3ls-cartsi:hover:before{
	content:"Rs.8000";
}

.simpleCart_shelfItem button.am:hover:before{
  content:"Rs.900";
}

.simpleCart_shelfItem button.am1:hover:before{
	content:"Rs.9000";
}

.simpleCart_shelfItem button.am2:hover:before{
  content:"Rs.1000";
}

.simpleCart_shelfItem button.am21:hover:before{
	content:"Rs.10000";
}.simpleCart_shelfItem button.am3:hover:before{
  content:"Rs.1400";
}

.simpleCart_shelfItem button.am31:hover:before{
	content:"Rs.10000";
}.simpleCart_shelfItem button.am4:hover:before{
  content:"Rs.1600";
}

.simpleCart_shelfItem button.am41:hover:before{
	content:"Rs.17000";
}.simpleCart_shelfItem button.am5:hover:before{
  content:"Rs.1500";
}

.simpleCart_shelfItem button.am51:hover:before{
	content:"Rs.15000";
}.simpleCart_shelfItem button.am6:hover:before{
  content:"Rs.1800";
}

.simpleCart_shelfItem button.am61:hover:before{
	content:"Rs.21000";
}.simpleCart_shelfItem button.am7:hover:before{
  content:"Rs.2000";
}

.simpleCart_shelfItem button.am71:hover:before{
	content:"Rs.25000";
}.simpleCart_shelfItem button.am8:hover:before{
  content:"Rs.2500";
}

.simpleCart_shelfItem button.am81:hover:before{
	content:"Rs.30000";
}.simpleCart_shelfItem button.am9:hover:before{
  content:"Rs.1600";
}

.simpleCart_shelfItem button.am91:hover:before{
	content:"Rs.25000";
}.simpleCart_shelfItem button.am10:hover:before{
  content:"Rs.1600";
}

.simpleCart_shelfItem button.am101:hover:before{
	content:"Rs.29000";
}

.simpleCart_shelfItem button.am11:hover:before{
  content:"Rs.2500";
}

.simpleCart_shelfItem button.am111:hover:before{
	content:"Rs.40000";
}




/* Css for desktop prices*/

.simpleCart_shelfItem button.d:hover:before{
  content:"Rs.800";
}

.simpleCart_shelfItem button.d1:hover:before{
	content:"Rs.10000";
}

.simpleCart_shelfItem button.d2:hover:before{
  content:"Rs.1500";
}

.simpleCart_shelfItem button.d21:hover:before{
	content:"Rs.15000";
}
.simpleCart_shelfItem button.d3:hover:before{
  content:"Rs.1800";
}

.simpleCart_shelfItem button.d31:hover:before{
	content:"Rs.18000";
}
.simpleCart_shelfItem button.d4:hover:before{
  content:"Rs.1800";
}

.simpleCart_shelfItem button.d41:hover:before{
	content:"Rs.18000";
}
.simpleCart_shelfItem button.d5:hover:before{
  content:"Rs.2500";
}

.simpleCart_shelfItem button.d51:hover:before{
	content:"Rs.25000";
}
.simpleCart_shelfItem button.d6:hover:before{
  content:"Rs.2000";
}

.simpleCart_shelfItem button.d61:hover:before{
	content:"Rs.21000";
}

.simpleCart_shelfItem button.d7:hover:before{
  content:"Rs.2800";
}

.simpleCart_shelfItem button.d71:hover:before{
	content:"Rs.30000";
}


/* Css for workstation pricing*/
.simpleCart_shelfItem button.w:hover:before{
  content:"Rs.2500";
}

.simpleCart_shelfItem button.w1:hover:before{
	content:"Rs.30000";
}

.simpleCart_shelfItem button.w2:hover:before{
  content:"Rs.3500";
}

.simpleCart_shelfItem button.w21:hover:before{
	content:"Rs.45000";
}
.simpleCart_shelfItem button.w3:hover:before{
  content:"Rs.4500";
}

.simpleCart_shelfItem button.w31:hover:before{
	content:"Rs.8000";
}


/* Css for photocopier pricing*/
.simpleCart_shelfItem button.ph:hover:before{
  content:"Rs.4500";
}

.simpleCart_shelfItem button.ph1:hover:before{
	content:"Rs.45000";
}

.simpleCart_shelfItem button.ph2:hover:before{
  content:"Rs.3000";
}

.simpleCart_shelfItem button.ph21:hover:before{
	content:"Rs.35000";
}


/* Css for Printer pricing*/
.simpleCart_shelfItem button.p:hover:before{
  content:"Rs.2400";
}

.simpleCart_shelfItem button.p1:hover:before{
	content:"Rs.24000";
}

.simpleCart_shelfItem button.p2:hover:before{
  content:"Rs.1800";
}

.simpleCart_shelfItem button.p21:hover:before{
	content:"Rs.13000";
}
.simpleCart_shelfItem button.p3:hover:before{
  content:"Rs.2500";
}

.simpleCart_shelfItem button.p31:hover:before{
	content:"Rs.15000";
}



/* Css for Bike pricing*/
.simpleCart_shelfItem button.b:hover:before{
  content:"Rs.3000";
}

.simpleCart_shelfItem button.b1:hover:before{
	content:"Rs.35000";
}
/* Css for Scooty pricing*/
.simpleCart_shelfItem button.sc:hover:before{
  content:"Rs.2000";
}

.simpleCart_shelfItem button.sc1:hover:before{
	content:"Rs.18000";
}

/* Css for Playstation pricing*/
.simpleCart_shelfItem button.gp:hover:before{
  content:"Rs.1500";
}

.simpleCart_shelfItem button.gp1:hover:before{
	content:"Rs.9000";
}





.simpleCart_shelfItem button.dvr:hover:before{
  content:"Rs.2100";
}

.simpleCart_shelfItem button.dvr1:hover:before{
	content:"Rs.4500";
}
.simpleCart_shelfItem button.dvr12:hover:before{
	content:"Rs.1850";
}
.simpleCart_shelfItem button.dvr2:hover:before{
  content:"Rs.4500";
}

.simpleCart_shelfItem button.dvr21:hover:before{
	content:"Rs.4500";
}
.simpleCart_shelfItem button.dvr3:hover:before{
  content:"Rs.1300";
}

.simpleCart_shelfItem button.dvr31:hover:before{
	content:"Rs.2600";
}
.simpleCart_shelfItem button.dvr4:hover:before{
  content:"Rs.16@m";
}

.simpleCart_shelfItem button.dvr41:hover:before{
	content:"Rs.16@m";
}
.simpleCart_shelfItem button.dvr5:hover:before{
  content:"Rs.40@piece";
}

.simpleCart_shelfItem button.dvr51:hover:before{
	content:"Rs.40@piece";
}
.simpleCart_shelfItem button.dvr6:hover:before{
  content:"Rs.2600";
}

.simpleCart_shelfItem button.dvr61:hover:before{
	content:"Rs.4250";
}
.simpleCart_shelfItem button.tab:hover:before{
  content:"Rs.1500";
}

.simpleCart_shelfItem button.tab1:hover:before{
	content:"Rs.9000";
}
.simpleCart_shelfItem button.mb:hover:before{
  content:"Rs.4500";
}

.simpleCart_shelfItem button.mb1:hover:before{
	content:"Rs.40000";
}
.simpleCart_shelfItem button.mbo:hover:before{
  content:"Rs.3500";
}

.simpleCart_shelfItem button.mbo1:hover:before{
	content:"Rs.30000";
}
.simpleCart_shelfItem button.ro:hover:before{
  content:"Rs.1500";
}

.simpleCart_shelfItem button.ro1:hover:before{
	content:"Rs.9000";
}
.simpleCart_shelfItem button.wm:hover:before{
  content:"Rs.1200";
}

.simpleCart_shelfItem button.wm1:hover:before{
	content:"Rs.17000";
}
.simpleCart_shelfItem button.mw:hover:before{
  content:"Rs.500";
}

.simpleCart_shelfItem button.mw1:hover:before{
	content:"Rs.6300";
}
.simpleCart_shelfItem button.rf:hover:before{
  content:"Rs.900";
}

.simpleCart_shelfItem button.rf1:hover:before{
	content:"Rs.15000";
}
.simpleCart_shelfItem button.ld:hover:before{
  content:"Rs.800";
}

.simpleCart_shelfItem button.ld1:hover:before{
	content:"Rs.14000";
}
.simpleCart_shelfItem button.cc:hover:before{
  content:"Rs.1500";
}

.simpleCart_shelfItem button.cc1:hover:before{
	content:"Rs.1500";
}

.simpleCart_shelfItem button.cc2:hover:before{
  content:"Rs.1800";
}

.simpleCart_shelfItem button.cc21:hover:before{
	content:"Rs.1800";
}
.simpleCart_shelfItem button.cc3:hover:before{
  content:"Rs.3000";
}

.simpleCart_shelfItem button.cc31:hover:before{
	content:"Rs.3000";
}


.simpleCart_shelfItem button.cyc:hover:before{
  content:"Rs.2000";
}

.simpleCart_shelfItem button.cyc1:hover:before{
	content:"Rs.18000";
}
.simpleCart_shelfItem button.tm:hover:before{
  content:"Rs.4200";
}

.simpleCart_shelfItem button.tm1:hover:before{
	content:"Rs.49000";
}


/* CSS for header and menu bar*/
.fa {
  padding: 20px;
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
}

.fa:hover {
    opacity: 0.7;
}

.fa-facebook {
  background: #3B5998;
  color: white;
}

.fa-twitter {
  background: #55ACEE;
  color: white;
}


.fa-linkedin {
  background: #007bb5;
  color: white;
}


.fa-instagram {
  background: #125688;
  color: white;
}


#spcl h5{
	font-weight: 200;
    color: #ff5063;
    font-size:1.8em;
    margin: .5em 0 0;
}
#spcl h5 span{
	font-weight: 300;
    display: block;
    color:#ffffff;
    padding-left: 2em;
    margin: .5em 0 0.2em;
}