/*COMMON*/
a {text-decoration: none;}
.mix-color {background: linear-gradient(115deg, #f97794, #6200ff, #3498db); font-weight: 700; background-clip: border-box; -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.bg-mix {background: linear-gradient(115deg, #f97794, #6200ff, #3498db);}
.btn-brand {padding: 12px 25px; color: #fff; font-weight: 500; border-radius: 50px; margin-right: 15px; font-size: 18px;}
.btn-dark {padding: 12px 25px; color: #fff; font-weight: 500; border-radius: 50px; background: #0f171b;  font-size: 18px;}
h6 {font-size: 20px; font-weight: 700;}
h2 {font-size: 45px; font-weight: 700;}
body {overflow-x: hidden;}

/*NAV*/
.navbar {box-shadow: 0px 8px 30px rgba(0,0,0,0.08);}
.navbar .navbar-brand {font-size: 50px}
.navbar .navbar-nav .nav-item .nav-active {color: #6200ff; font-size: 18px;}
.navbar .navbar-nav .nav-link {font-size: 18px; color: #000; font-weight: 600;}

/*HERO*/
.hero {padding: 200px 0px 100px; position: relative;}
.hero h1 {font-size: 70px; padding-bottom: 30px; font-weight: 700;}
.hero .hero-btn {padding-top: 30px;}
.hero .hero-img {position: relative;}
.hero .mac {border: 20px solid #fff; border-radius: 30px; width: 90%;}
.hero .hero-img-1 {position: absolute; top: -80px; left: 0; width: 30%; box-shadow: 0px 0px 15px 0px rgba(72, 73, 121, 0.15); border-radius: 20px}
.hero .hero-img-2 {position: absolute; right: 0; bottom: 80px; width: 30%; box-shadow: 0px 0px 15px 0px rgba(72, 73, 121, 0.15); border-radius: 20px}
.hero .round-shape {position: absolute; width: 1000px; height: 1000px; background: linear-gradient(115deg, #f97794, #6200ff, #3498db); top: 0; right: -450px; border-radius: 100%; z-index: -1; display: inline-block; animation-name: rotateme; animation-duration: 10s; animation-iteration-count: infinite; animation-timing-function: linear; -webkit-animation-name: rotateme; -webkit-animation-duration: 10s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear;}
.hero .round-shape::before {content: ''; height: 410px; width: 400px; background: #fff; position: absolute; top: 50%; left: 50%; border-radius: 100%; transform: translate(-50%, -50%);}

@keyframes rotateme {
    from {transform: rotate(0deg);}
    to { transform: rotate(360deg);}
}
@-webkit-keyframes rotateme {
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}

.topbottom{animation: topbottom 5s infinite;}
@-webkit-keyframes topbottom {
  0% {-webkit-transform: translate(0, 0); transform: translate(0, 0);}
  50% {-webkit-transform: translate(0, 20px); transform: translate(0, 20px);}
  100% {-webkit-transform: translate(0, 0); transform: translate(0, 0);} 
}

.leftRight{animation: leftRight 1.2s infinite; animation-duration: 5s;}
@-webkit-keyframes leftRight {
  0% {-webkit-transform: translate(0, 0); transform: translate(0, 0);}
  50% {-webkit-transform: translate(30px, 0); transform: translate(30px, 0);}
  100% { -webkit-transform: translate(0, 0); transform: translate(0, 0);}}


/*SERVICES*/
.services {padding: 80px 0px;}
.services .services-body {padding-top: 80px;}
.services .services-item {padding: 50px; position: relative; margin: 15px; margin-top: 150px;}
.services .services-item::before {content: ''; background: #fff; position: absolute; box-shadow: 0 10px 35px 0 rgba(92.99999999999996, 72.00000000000001, 223, .08); border-radius: 30px; width: 100%; height: 100%; top: 0; left: 0; z-index: -9; transform: skewY(10deg); transition: all 0.5s ease-in-out 0s;}
.services .services-item:hover::before {background: linear-gradient(115deg, #f97794, #6200ff, #3498db); transform: skewX(350deg); transition: all 0.5s ease-in-out 0s;}
.services .services-img {width: 200px; margin: auto; margin-top: -150px;}
.services .services-img img {width: 100%;}
.services .services-cont {padding-top: 30px; position: relative;}
.services .services-cont h4 {font-size: 25px;}
.services .services-cont p {font-size: 18px;}
.services .services-cont .services-btn {position: absolute; height: 80px; width: 80px; background: linear-gradient(115deg, #f97794, #6200ff, #3498db); position: absolute; bottom: -140px; left: 50%; border-radius: 100%; transform: translate(-50%, -50%); border: 10px solid #fff;}



/*ABOUT*/
.about {padding: 80px 0px;}
.about img {width: 100%;}
.about .about-img {width: 100%;}
.about .about-cont {width: 100%; margin-left: 60px;}
.about h2 {font-size: 45px; font-weight: 700;}
.about p {padding-top: 20px; padding-bottom: 30px;}
.about a {margin-top: 30px;}

/*FEATURES*/
.features {padding: 120px 0px;}
.features::before {content: '';position: absolute; top: 0; left: -10%; width: 130%; height: 100%; background: linear-gradient(176deg, #dbfeff, #fff, #fff0fb, #ecb0e6); transform: rotate(3deg);}
.features .features-intro {position: relative; z-index: 1; padding-bottom: 50px;}
.features .features-imgs {position: relative; background-color: #fff; padding: 30px; border-radius: 20px; box-shadow: 0px 0px 15px 0px rgba(72, 73, 121, 0.15);}
.features .features-imgs .features-icon {padding: 20px 0px;}
.features .features-imgs .features-heading h5 {font-size: 25px; font-weight: 700; padding: 10px 0px;}
.features .features-imgs .features-des p {font-size: 20px;}

/*REPORTING*/
.reporting {padding: 120px 0px;}
.reporting .reporting-cont {padding-left: 40px;}
.reporting .reporting-cont p {padding: 10px 0px;}
.reporting .reporting-cont ul li {line-height: 2.8rem; list-style: none;}
.reporting .reporting-cont ul img {margin-right: 10px;}
.reporting .reporting-img img {width: 100%; box-shadow: 1px 73px 41px -22px rgba(76,111,255,.15); border-radius: 20px;}

/*MARQUEE*/
.marquee .marquee-text {font-size: 80px;}
.marquee .marquee-text img {width: 5px; margin-right: 20px; margin-left: 40px;}

/*PORTFOLIO*/
.portfolio { padding: 120px 0px;}
.portfolio .portfolio-intro {text-align: center; margin: auto; padding-bottom: 50px;}
.portfolio .portfolio-item {box-shadow: 0px 0px 15px 0px rgba(72, 73, 121, 0.15); border: 10px solid #fff; border-radius: 20px;}
.portfolio .portfolio-item img {width: 100%; height: 550px; border-radius: 20px; position: cover;}
.portfolio .portfolio-title {margin-top: 30px;}
.portfolio .portfolio-title h5 {font-size: 25px; font-weight: 700;}
.portfolio .portfolio-2nd {padding-top: 70px;}

/*PRICING*/
.pricing {padding: 120px 0px; background: url(../img/PRICING-bg.png); background-size: cover; background-position: center center; background-repeat: no-repeat; background-color: #f8fafc;}
.pricing .pricing-box {background-color: #fff; padding: 50px 30px; border-radius: 20px; box-shadow: 0px 0px 15px 0px rgba(72, 73, 121, 0.15);}
.pricing .pricing-box .pricing-card {border-bottom: 1px solid #dbdbdb; padding-bottom: 30px;}
.pricing .pricing-box .pricing-intro {margin-bottom: 0; margin-top: 15px;}
.pricing .pricing-box h3 {font-size: 35px; font-weight: 700; color: #6200ff;}
.pricing .pricing-box .pricing-month {}
.pricing .pricing-box h2 {font-size: 50px; font-weight: 700;}
.pricing .pricing-box h2 sup {font-size: 20px; font-weight: 700; color: #75727b;}
.pricing .pricing-box span {font-size: 18px; font-weight: 500; color: #75727b;}
.pricing .pricing-box img {width: 70%;}
.pricing .pricing-box .pricing-list p {padding-top: 40px;}
.pricing .pricing-box .pricing-list ul {padding-left: 0; padding-bottom: 20px;}
.pricing .pricing-box .pricing-list ul li {line-height: 2.8rem; list-style: none;}
.pricing .pricing-box .pricing-list ul img {margin-right: 10px; width: 7%;}

/*TESTIMONIAL*/
.testimonial {padding: 120px 0px;}
.testimonial .testimonial-intro {padding-bottom: 80px;}
.testimonial .testimonial-review {padding-top: 80px;}
.testimonial .testimonial1 {margin-top: -80px;}
.testimonial .testimonial2 {margin-top: -170px;}
.testimonial .testimonial3 {margin-top: -270px;}
.testimonial .testimonial-intro {position: relative; z-index: 1; padding-bottom: 50px;}
.testimonial .testimonial-imgs {padding-bottom: 50px;}
.testimonial .testimonial-box {position: relative; background-color: #fff; padding: 20px 30px; border-radius: 20px; box-shadow: 0px 0px 15px 0px rgba(72, 73, 121, 0.15); margin-left: 15px; margin-right: 15px;}
.testimonial .testimonial-box i {position: absolute; right: 20px; top: 60px;}
.testimonial .testimonial-imgs .testimonial-icon {width: 80px; height: 80px; position: relative; border-radius: 20px; margin-left: -50px;}
.testimonial .testimonial-imgs .testimonial-icon::before { content: ""; position: absolute; width: 150px; height: 1px; z-index: 99; left: 60px; background-color: #000; top: 60px;}
.testimonial .testimonial-imgs .testimonial-icon img {padding: 20px 0px; width: 100%; border-radius: 40%;}
.testimonial .testimonial-des p {margin-bottom: 30px; line-height: 2rem; font-size: 18px; color: #dedede; font-weight: 400;}
.testimonial .testimonial-heading h5 {font-size: 25px; font-weight: 600; padding: 10px 0px; color: #6200ff;}
.testimonial .testimonial-des p {font-size: 16px; color: #75727b;}

/*COUNTER*/
.count .count-body {background: url('../img/count-bg.png'); background-size: cover; background-position: center center; background-repeat: no-repeat; border-radius: 20px; text-align: center; padding: 50px 20px 25px 20px;}
.count .count-body .counter h3 span {font-size: 50px; font-weight: 700; color: #6200ff;}
.count .count-body .counter sup {font-size: 30px; font-weight: 500; color: #16072f;}
.count .count-body .counter p {font-size: 22px; color: #16072f;}

/*BLOG*/
.blog {padding: 120px 0px;}
.blog .blog-intro {text-align: center; margin: auto; padding-bottom: 50px;}
.blog .blog-item {box-shadow: 0px 0px 15px 0px rgba(72, 73, 121, 0.15); border-radius: 20px;}
.blog .blog-item img {width: 100%; border-radius: 20px; position: cover;}
.blog .blog-title {margin-top: 30px;}
.blog .blog-title p {text-align: left;}
.blog .blog-title p .list-style  {padding-right: 20px;}
.blog .blog-title p .list-circle  {padding-right: 20px; font-size: 5px;}
.blog .blog-title h5 {font-size: 28px; font-weight: 700; text-align: left;}
.blog .blog-title h5:hover {color: #6200ff;}
.blog .blog-2nd {padding-top: 70px;}

/*FOOTER*/
.footer {padding: 80px 0px; background: url(../img/count-bg.png); background-size: cover; background-position: center center; background-repeat: no-repeat; background-color: #f8fafc;}
.footer .footer-body {background-color: #f8fafc; padding: 50px; border-radius: 50px;}
.footer .footer-body .media-icon a {font-size: 20px; line-height: 2.8rem; text-decoration: underline; color: #16072f;}
.footer .footer-body .media-icon a:hover {color: #6200ff;}
.footer .footer-body h5 {font-size: 25px; padding-bottom: 20px;}
.footer .footer-body p {font-size: 18px;}
.footer .footer-body .media-icon {margin-left: -30px;}
.footer .footer-body .media-icon li {list-style: none;}
.footer .footer-body .list-inline {display: flex;}
.footer .footer-body .list-inline li i {font-size: 30px; background-color: #fff; padding: 15px; box-shadow: 0px 0px 15px 0px rgba(72, 73, 121, 0.15); border-radius: 100px; margin: 6px;}
.footer .footer-body .information-list {margin-left: -30px;}
.footer .footer-body .information-list li {list-style: none; line-height: 2.5rem; font-size: 18px;}
.footer .footer-body .info-search-text {padding-top: 20px; font-size: 15px; color: #4b4b4b;}
.footer .footer-body .subscribe {width: 90%;}
.footer .footer-body .subscribe nav {margin-left: -10px;}
.footer .footer-body .subscribe .btn {color: #fff; padding: 10px; width: 40%; font-size: 17px; font-weight: 700; margin: 5px;}
.footer .footer-body .subscribe form {width: 100%; background-color: #fff; box-shadow: 0px 0px 15px 0px rgba(72, 73, 121, 0.15); border-radius: 8px;}
.footer .footer-body .subscribe form input::type {width: 100%; border-radius: 5px;}
.footer .footer-body .subscribe form input {border: none;}
.footer .footer-body .navbar {box-shadow: none;}

.footer .copyright {text-align: center; margin-top: 40px; font-size: 20px;}
.footer .copyright-color {color: #6200ff;}



.copyright-color {
  --c: #828282;
  --s: .15em;
  
  padding-bottom: 2px;
  background: 
    conic-gradient(from 135deg at top   ,var(--c) 90deg,#0000 0) 
      left 0 bottom var(--s)/calc(2*var(--s)) var(--s) repeat-x,
    conic-gradient(from -45deg at bottom,var(--c) 90deg,#0000 0) 
      bottom 0 left var(--s)/calc(2*var(--s)) var(--s) repeat-x;
  --_m:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0) 50%/var(--_p,0%) padding-box no-repeat;
  -webkit-mask: var(--_m);
          mask: var(--_m);
  transition: .5s;
  --_p: 100%;
  color: var(--c);
}