:root{
	--blue: #D0CCE5;
	--darkblue: #255A9E;
	--orange: #FFCA02;
}
@font-face {
  font-family: Poppins;
  src: url(fonts/Poppins-Regular.ttf);
}

@font-face {
  font-family: timeroman;
  src: url(fonts/timeroman.otf);
}

@font-face {
  font-family: phonepe;
  src: url(fonts/phonepe.otf);
}

@font-face {
  font-family: uniregular;
  src: url(fonts/uniregular.otf);
}

@font-face {
  font-family: unibold;
  src: url(fonts/unibold.otf);
}

.container{overflow: hidden;}
.btn-outline-orange{color: var(--orange); border: 1px solid var(--orange); background: transparent;}
.btn-outline-orange:hover{color: #fff !important; background: var(--orange) !important;}
.btn-outline-mycolor{color: var(--darkblue); border: 1px solid var(--darkblue) !important; background: transparent;}
.btn-outline-mycolor:hover{color: #fff !important; background: var(--darkblue);}
.myorangecolor{color: #FFCA02;}
.mybg{background: #255A9E;}
.mycolor{color: #255A9E !important;}
.bgorange{background: #FFCA02 !important;}
a{text-decoration: none;}
a:hover{text-decoration: none;}
body{margin: 0; padding: 0; font-family: 'phonepe'; letter-spacing: 1px; font-weight: normal;}
h1,h2,h3,h4,h5,h6{font-family: 'Poppins'; font-weight: 600;}
.w-80{width: 50%;}
#header{background: var(--darkblue);}
.logo{padding: 10px 0; display: block; text-align: center;}
.logo img{width: 245px;}
.mylogo{width: 245px; display: flex; justify-content: center; align-items: center; height: 110px;}
.mylogo .inside{width: 110px; position: relative;}
.inside img{width: 100%; animation: tireanimation 5s infinite; animation-timing-function: linear;}
.mylogo .inside:after{content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: url('images/ETOILE.png'); background-size: cover;}
.textlogo{font-family: 'timeroman'; font-size: 32px; font-weight: 700; letter-spacing: 3px; text-shadow:2px 2px 5px var(--orange); color: var(--darkblue);}
.top{background: var(--darkblue); display: flex; justify-content: space-between; flex-wrap: wrap;}
.topleft{ position: relative; background-color: #255A9E; border-radius: 0 0 0 20px; font-size: 15px; line-height: 27px; padding: 10px 30px 11px 30px; margin-left: -15px; width: calc(100% - 305px); color: #fff; text-align: center; display: flex; align-items: center;}
.topleft:after{position: absolute; left: -40px; top: -10px; content: ''; width: 0; height: 0; border-style: solid; border-width: 0px 48px 54px 0; border-color: transparent #255A9E transparent transparent;}
.topleft span{}
.social-links {margin-left: 35px;}
.social-links ul{margin: 0; padding: 0;}
.social-links ul li {display: inline-block; margin-left: 10px; list-style: none; text-align: center;}
.social-links ul li a{font-size: 15px;}
.topright{display: block; position: relative; background-color: #FFCA02; border-radius: 0 0 0 20px; font-size: 18px; line-height: 25px; font-weight: 600; text-transform: uppercase; padding: 10px 20px; margin-left: -15px; width: 305px; text-align: center; outline: none;}
.topright:after{position: absolute; left: -40px; top: -10px; content: ''; width: 0; height: 0; border-style: solid; border-width: 0px 48px 54px 0; border-color: transparent #FFCA02 transparent transparent;}
.topleft a{color: #fff;}
.topleft a:hover{text-decoration: none; color: #FFCA02;}
.topright a{color: #000;}
.topright a:hover{text-decoration: none; color: #fff;}
.headermenu{display: flex; justify-content: end;}
.headermenu ul{margin: 0; padding: 0;}
.headermenu li{display: inline-block; padding: 10px;}
.headermenu li a{display: flex; align-items: center; position: relative; color: #000; margin-left: 15px; padding: 12px 12px 12px 0px;}
.headermenu li a:after{content:''; width: 25px; height: 25px; animation: tireanimation 5s infinite; animation-timing-function: linear; position: absolute; left: -27px; background-image: url('images/tireicon.png'); background-size: cover;}
.headermenu li a:hover{text-decoration: none; color: var(--orange);}
@keyframes tireanimation{
	0%{transform: rotate(0deg);}
	100%{transform: rotate(360deg);}
}
.category{text-align: center;}
.category img{width: 40px !important; margin-bottom: 5px; filter: brightness(10); animation: tireanimation 10s infinite; animation-timing-function: linear; margin: 0 auto;}
.category a{color: #fff; text-transform: uppercase; display: block; transition: .5s ease; position: relative; -webkit-transform: translate3d(0, 0, 0); overflow: hidden;}
.category a:hover{background: var(--orange);}
.category a:after{content: ''; position: absolute; z-index: 0; left: 100%; top: 0; width: 180%; height: 180%; background-color: var(--orange); -webkit-transform: skew(45deg) translate3d(0, 0, 0); -moz-transform: skew(45deg) translate3d(0, 0, 0); -ms-transform: skew(45deg) translate3d(0, 0, 0); -o-transform: skew(45deg) translate3d(0, 0, 0); -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; opacity: 0; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease;}
.category:hover a:after{left: -60%; opacity: 1; z-index: -1;}
.category:hover a{color: #000;}
.category:hover img{filter: brightness(0);}
.slider{overflow: hidden;}
.slider video{width: 100%;}
#wanttobuy{background-image: url('images/bgbg.png'); background-size: cover;}
#wanttobuy .left{text-transform: uppercase; letter-spacing: 2px;}
#wanttobuy .left p{color: #000 !important; font-weight: 600;}
#wanttobuy .center{text-align: center;}
#wanttobuy .right img{width: 100%;}
.logotext{display: flex; justify-content: center;}
.logotyping{position: relative; color: var(--darkblue); font-size: 37px; z-index: 1; font-weight: 600; text-transform: uppercase;}
.logotyping:before{content: 'ETOILE'; position: absolute; opacity: ; color: #f1f1f1; top: -50px; text-align: center; z-index: -1; font-size: 65px; width: 100%; font-weight: 600; text-transform: uppercase;}
.logotyping:after{content:''; height: 2px; background: var(--darkblue); position: absolute; left: 10%; width: 80%; bottom: -5px; z-index: 0;}

#categories{background-image: url('images/bgbg.png'); background-size: cover; background-attachment: fixed; overflow: hidden;}
#categories .overlay{background: rgba(255, 255, 255, .9);}
#categories .card{border: 0 !important; overflow: hidden;}
#categories .card .card-img{transition: .3s ease;}
#categories .card:hover .card-img{transform: rotate(5deg) scale(1.1);}
#categories .card:hover .card-img-overlay{transform: scale(1.1);}
#categories .card-img-overlay{display: flex; justify-content: center; align-items: center; transition: .3s ease;}
#categories .card-title{color: #212121; background: var(--orange); padding: 7px;}

#whychooseus .logotyping:before{color: var(--blue); opacity: 0.1;}
.whyitem{text-align: center; height: 100%;}
.whyitem b{ font-size: 21px;}
.whyicon{position: relative; width: 70px; height: 70px; margin: 0 auto; background: var(--orange); border-radius: 50%; margin-top: -35px;}
.whyicon:after{content: ''; width: 80px; height: 80px; animation: tireanimation 15s infinite; animation-timing-function: linear; position: absolute; left: 0px; top: 0; background-image: url(images/tireicon.png); background-size: cover;}
#whychooseus p{text-align: justify !important;}

#footer{background-image: url('images/bgbg.png'); background-size: cover;}
#footerbar{background: var(--darkblue);}

#howitworks .logotyping:before{color: var(--blue); opacity: 0.1;}
#howitworks .logotyping:after{background: #fff;}
#howitworks{text-align: center; background: var(--darkblue);}
/*.one{position: relative; font-size: 20px; color: #fff;}
.one:before{content: '01'; position: absolute; left: -30px; top: -25px; opacity: 0.3; color: #f1f1f1; font-size: 45px;}
.two{position: relative; font-size: 20px; color: #fff;}
.two:before{content: '02'; position: absolute; left: -30px; top: -25px; opacity: 0.3; color: #f1f1f1; font-size: 45px;}
.three{position: relative; font-size: 20px; color: #fff;}
.three:before{content: '03'; position: absolute; left: -30px; top: -25px; opacity: 0.3; color: #f1f1f1; font-size: 45px;}*/
.howicon{width: 200px; margin: 0 auto;}
.howicon img{width: 100%;}
.howitem{padding: 20px 0;}
.howitem span{font-size: 22px; color: var(--orange); font-weight: 600; letter-spacing: 1px;}
#howitworks .col-md-4:hover .howicon{color: var(--orange);}

.pagination{list-style-type: none;padding: 10px 0;display: inline-flex;justify-content: space-between;box-sizing: border-box;}
.pagination li { box-sizing: border-box; padding-right: 10px;}
.pagination li a { box-sizing: border-box; background-color: #e2e6e6; padding: 8px; text-decoration: none; font-size: 12px; font-weight: bold; color: #616872; border-radius: 4px;}
.pagination li a:hover {background-color: #d4dada;}
.pagination .next a, .pagination .prev a {text-transform: uppercase; font-size: 12px;}
.pagination .currentpage a {background-color: #518acb; color: #fff;}
.pagination .currentpage a:hover {background-color: #518acb;}

#advantages{}
/*#advantages .logotyping:before{ content: 'Advantages';}*/
#advantages .logotyping:after{background: #fff;}
#advantages img{width: 100%; opacity: .6;}
.advul{margin-top: 20px;}
.advul li{padding: 10px 0;}
/*#products .logotyping:before{ content: 'Latest Products';}*/
#contact{background-image: url('images/bgbg.png'); background-size: cover;}
.uheading{position: relative; text-shadow: 2px 3px 3px #000;}
.mobmenu{display: none; width: 100%; padding-bottom: 50px; }
.wheelcontainer{position: fixed; width: 100%; display: none; bottom: -40px; z-index: 99999; background: #000; border-top: 1px solid #fff;}
.wheel{width: 50px; height: 50px; margin: 0 auto; position: relative; top: -25px;}
.wheel img{width: 100%; animation: tireanimation 3s infinite; animation-timing-function: linear; background: var(--orange);}

.aboutpage{font-size: 18px;}
.lead b{}
.myclassorder .overlay{width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background:rgba(0, 0, 0, .8);}
.bikemap img{width: 100%;}
.gpitem span{position: relative; margin-left: 20px; padding-left: 15px;}
.gpitem span:before{content: ''; position: absolute; left: -20px; top: 0; background-image: url('images/arrow.png'); background-size: cover; width: 20px; height: 20px;}
.whatsapp{width: 50px; height: 50px; position: fixed; top: 45%; right: 0; z-index: 999999999; background: #25D366; display: flex; justify-content: center; align-items: center; border-radius: 50% 0 0 50%;}
.whatsapp a{display: block; color: #fff; font-size: 25px;}
.mobslider{display: none; overflow: hidden; width: 100%;}
.mobslider video{width: 100%;}

@media only screen and (max-width: 576px) and (min-width: 300px)
{
	#header{background: #000;}
	.top{background: #000;}
	.topleft{width: 100%; margin-left: 0; border-radius: 0; text-align: center; flex-wrap: wrap; justify-content: center; background: #000;}
	.topleft:after{display: none;}
	.topleft .social-links{margin-left: 0; width: 100%; background: #000; display: flex; justify-content: center;}
	.topleft .social-links a{color: var(--orange) !important; margin-left: 0; border: 1px solid var(--orange); padding: 8px !important; border-radius: 15px; margin-bottom: 10px;}
	.mobmenu .social-links a:after{display: none !important;}
	.topright{width: 100%; margin-left: 0; border-radius: 0;}
	.topright:after{display: none;}
	.headermenu{display: none;}
	.logotyping{font-size: 21px; padding: 0 10px;}
  .logotyping:before{top: -32px; font-size: 40px;}
  .wheelcontainer{display: block;}
  .mobmenu{ }
  .mobmenu li{border-bottom: 1px solid #000;}
  .mobmenu li a{display: flex; align-items: center; position: relative; color: #000; margin-left: 15px; padding: 12px 12px 12px 0px;}
  .mobmenu li a:after{content:''; width: 25px; height: 25px; animation: tireanimation 5s infinite; animation-timing-function: linear; position: absolute; left: -27px; background-image: url('images/tireicon.png'); background-size: cover;}
  .mylogo{margin: 0 auto;}
  .category p{font-size: 8px;}
  .mobhide{display: none;}
  .btnmenu .btn{font-size: 0.8rem;}
  .mobslider{display: block;}
  .slider{display: none;}
}