#sliderSec{padding:5% 0;background:url('../img/sliderBg.jpg');background-attachment:fixed;}
#sliderSec img{width: 80%;margin: auto;display: block;}
#sliderSec h2{color: #000;font-size: 50px;font-weight: 800;}
#sliderSec p{color: #4d4b4b;}
#sliderSec a{background-color: #f58b1d;color: #ffffff;width: 25%;border-radius: 5px;border: 0;padding: 1%;text-align: center;transition: ease all .7s;display: block;}
#sliderSec a:hover{background-color: #5c0044;}

a#downloadBtn{
  display: block;
  width: 30%;
  margin: auto;
  margin-top: 3%;
}
a#downloadBtn:hover{}

img#topRings{top:92px;
    position: absolute;
    left: 39%;
    width: 7%;
     -webkit-animation-name: rotate;
  /*animation-delay:s;*/
  -webkit-animation-duration:5s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: normal;
  -webkit-transform-origin: 50% 0%;
  -webkit-animation-timing-function: linear;  /* or make your custom easing */
}

@-webkit-keyframes rotate{
  0% {
    -webkit-transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(20deg);
  }
  75% {
    -webkit-transform: rotate(-20deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
  }
}

#started{text-align:center;padding: 5%;}
#started p{font-size: 16px;}
#started h2{margin-bottom: 3%;}
#started a{background-color: #f58b1d;color: #ffffff;width: 21%;border-radius:5px;border: 0;padding: 1%;margin: auto;transition:ease all .7s;}
#started a:hover{background-color: #5c0044;}
#started a:focus{box-shadow:none;}

#why{padding:0% 0;}
.whyBx{padding:4%;background-color: #5c0044;border-radius: 5px;}
.whyBx h2{color: #fafafa;margin-bottom:2%;}
.whyBx p{color: #d6d6d6;font-size: 14px;}

.listBx{background: #4c0038; padding:8% 3%;border-radius: 5px;margin-bottom: 3%;}
.listBx .listBxImg{background: #5c0044;padding: 7%;border-radius: 5px;}
.listBx .listBxImg img{width:70%;display: block;margin: auto;}
.listBx h3{color: #fff;font-size: 17px;}
.listBx h3 span{display: block;font-size: 35px;font-weight:600;}

.whyListBx{margin: 2% 3%;margin-left:0;}
.whyListBx img{width: 30%;display: block;margin: auto;}
.whyListBx p{text-align: center;}
.whyListBxBorder{padding: 2% 1%;}
.whyBorderRight{border-right: 1px solid #525252;}
.whyBorderBottom{border-bottom: 1px solid #525252;}

span.num{
  font-size: 4em;
  font-weight: 700;
  line-height: 1em;
  display: block;
  color: #fff;
}
span.title{
  font-size: 1.21em;
  margin: 10px 0 9px;
  color: #fff;
  line-height: 2.1em;
  font-weight: 800;
  display: block;
}
span.desc{display:block;}

#services{padding:5% 0;}
#services h2{text-align:center;margin-bottom:1%;}
#services p{text-align:center;font-size: 14px;}
.serviceBx{text-align:center;margin: 9% 0;padding: 11%;transition: ease all .7s;}
.serviceBx img{}
.serviceBx h4{color: #000;font-size: 16px;font-weight: 700;margin: 5% 0;}
.serviceBx p{}
.serviceBx:hover{box-shadow: 0 5px 8px #d3d3d3;background: #fff;}

.circleStyle{max-width: 100%;position: absolute;left: -188px;top:750px;z-index: -1;animation: round 20s infinite;width: 50%;}
@keyframes round{
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

#products{padding:5% 0;}
#products .headingBx{text-align:center;margin-bottom: 5%;}
#products .headingBx h2{margin-bottom: 1%;}
#products .headingBx p{font-size:14px;}
a.redirectLink{background-color: #f58b1d;color: #ffffff;width: 21%;border-radius: 5px;border: 0;padding: 1%;margin: auto;transition: ease all .7s;text-align: center;}
a.redirectLink:hover{background-color: #5c0044;}
a.redirectLink:focus{box-shadow:none;}

.productBx{position: relative;overflow: hidden;transition: all 0.3s ease-in-out;margin-bottom: 4%;}
.product-thumb{transition: all 0.3s ease-in-out;}
.product-thumb img{width: 100%;}
.product-details{background-color: rgba(255,255,255,0.9);position: absolute;width: 100%;height: 100%;left: 0; top: 0;display: flex;align-items: center;justify-content: center;text-align: center;opacity: 0;visibility: hidden;transition: all 0.3s ease-in-out;}
.product-content{}
.product-content a{font-weight: 700;color: #222;}
.product-content h3{margin-bottom: 5px;display: block;}
.product-content p{font-size: 14px;margin-bottom: 15px;}

.productBx:hover .product-thumb{transform: scale(1.2);}
.productBx:hover .product-details{visibility: visible;opacity: 1;}
.productBx:hover .product-content h3{transform: rotate(1080deg);transition: all 0.3s ease-in-out;}


/*testimonial-section*/
#clients{padding:5% 0;}
#clients .headingBx{text-align:center;margin-bottom:2%;}
#clients .headingBx h2{margin-bottom: 1%;}
#clients .headingBx p{font-size:14px;}



@-webkit-keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-250px * 7));
  }
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-250px * 7));
  }
}
.slider {background: white;box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.125);height: 100px;margin: auto;overflow: hidden;position: relative;width: 960px;}
.slider::before, .slider::after {background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);content: "";height: 100px;position: absolute;width: 200px;z-index: 2;}
.slider::after {right: 0;top: 0;transform: rotateZ(180deg);}
.slider::before {left: 0;top: 0;}
.slider .slide-track {-webkit-animation: scroll 40s linear infinite;animation: scroll 40s linear infinite;display: flex;width: calc(250px * 14);}
.slider .slide {height: 100px;width: 250px;}
.slider .slide img{width:80%;padding: 11%;}

.testimonials{margin-top: 5%;}
.center {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
}

.wrapper {
  display: flex;
  grid-gap: 1em;
  overflow: hidden;
  width: 55em;
}
.wrapper > .inner {
  display: flex;
  grid-gap: 1em;
  transition: all 1s ease-in-out;
}

.card {
  border-radius: 5px;
  /*box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);*/
  width: 17.5em;
  border: 0;
}

.card > .content {
  background: #ededed;
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
  padding: 1em;
  text-align: center;
  border-radius: 5px;
}
.card > .content > h1, .card > .content > h3 {
  margin: 0.35em 0;
}
.card > .content > h1 {
  color: #000;
  font-size:16px;
  line-height: 1;
}
.card > .content > h3 {
  color: #686868;
  font-size:12px;
  font-weight: 300;
}

.map {
  margin-top: 1em;
}
.map > button {
  all: unset;
  background: #5c0044;
  cursor: pointer;
  margin: 0 0.125em;
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  border-radius: 100%;
  height: 1em;
  width: 1em;
}
.map > button.active{background: #f58b1d;}
/*.map > button.active:after {
  background: #f58b1d;
  content: "";
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  border-radius: 100%;
  height: 0.5em;
  width: 0.5em;
}
*/
.content i{font-size: 70px;color: #dcdcdc;}
.content p{font-size: 14px;}


#types{padding:5% 0;}
#types h2{margin-bottom: 1%;}
#types p{}
#types ul{
  display: block;
  float: left;
  list-style-type: none;
  padding: 0;
  width: 100%;
}
#types li{
  font-size: 15px;
  font-weight: 600;
}
#types li i{color:#5c0344;font-size: 24px;}
#types img{
  width: 100%;
  box-shadow: 0 5px 8px #d3d3d3;
  height: 550px;
}
.rightBx{position: relative;}
.contactBxOnImg{
  position: absolute;
    background: #5c0344;
    box-shadow: 0 5px 8px #bdbdbd;
    border-radius: 3px;
    padding: 8% 6%;
    top: 66%;
    left: -10%;
    width: 80%;
}
.contactBxOnImg h3{
  font-size: 30px;
  color: #fff;
  font-weight: 600;
}
.contactBxOnImg p{
  color: #fff;
  font-size: 14px;
}
.contactBxOnImg a{
  color: #5c0344;
  background: #fff;
  width: 55%;
  padding: 2%;
  margin: inherit;
  margin-top: 9%;
}
.contactBxOnImg a:hover{background: #f58b1d;color: #000;}
.contactBxOnImg a i{}


/************* Responsive ******************/
@media (max-width: 480px) {
  img#topRings{display:none;}
  #sliderSec a{width: 45%;}
  a.redirectLink{width: 45%;}
  #started a{width: 45%;}
}


@media (max-width: 768px) {
  img#topRings{display:none;}
  #sliderSec a{width: 45%;}
  a.redirectLink{width: 45%;}
  #started a{width: 45%;}
}

@media (max-width: 900px) {

}

@media (max-width: 1200px) {

}

/************* End Responsive ******************/