/* css reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}

/* global styles */
a {
  text-decoration: none;
  color: white;
}
li {
  list-style: none;
}
.liner::before {
  content: "";
  position: absolute;
  left: 0;
  background: white;
  height: 1px;
}
body {
  font-family: "Roboto", sans-serif;
}
.full__web__wrapper{
  overflow-x: hidden;
}

/* scrollbar setup */
#scrollPath {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 10px;
  background: rgba(255, 255, 255, 0.05);
}
#progressbar {
  position: fixed;
  top: 0;
  left: 0;
  height: 10px;
  background: linear-gradient(to top, #008aff, #00ffe7);
  z-index: 200;
  animation: scrollBarAnimation 5s linear infinite;
}

@keyframes scrollBarAnimation {
  0%,
  100% {
    filter: hue-rotate(0deg);
  }
  50% {
    filter: hue-rotate(360deg);
  }
}
#progressbar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, #008aff, #00ffe7);
  filter: 10px;
}
#progressbar::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, #008aff, #00ffe7);
  filter: 30px;
}
/* scrollbar end */

/* scrollToTop part */
.scroll__to__top {
  position: fixed;
  right: 5%;
  background: white;
  width: 50px;
  height: 50px;
  bottom: 10%;
  z-index: 300;
  border-radius: 50%;
  display: flex;
  opacity: 0;
  justify-content: center;
  align-items: center;
  transition: opacity 0.5s ease-in-out;
}
.scroll__to__top.scroll__to__top__show {
  opacity: 1;
}
.scroll__to__top a {
  color: #008aff;
  text-align: center;
  width: 100%;
  height: 100%;
  padding: 5px 1px;
  animation: scrollToTopAnimation 1s linear infinite;
}
@keyframes scrollToTopAnimation {
  0%,
  100% {
    transform: translateY(10%);
  }
  50% {
    transform: translateY(-10%);
  }
}

/* section-1  */
.section-1 {
  background-image: linear-gradient(180deg, #f30089 0%, #2d01f7 100%);
  color: white;
}
.section-1 .logo__navbar__home {
  max-width: 1350px;
  margin: auto;
  background-image: url(https://websitedemos.net/alex79/wp-content/uploads/sites/600/2020/07/bg-001-free-img.png);
  background-position: bottom center;
  background-repeat: no-repeat;
}
/* logo__navbar */
.logo__navbar {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 15px 0;
  transition: 1s;
}

/*** logo__navbar animation on scroll (start) ***/
.logo__navbar__fixed {
  background: #f30089;
  width: 100%;
  position: fixed;
  z-index: 5;
  top: 0;
  left: 0;
  animation: show__on__scroll 0.5s linear;
  box-shadow: 0px 3px 5px 5px rgba(0, 0, 0, 0.541);
}
.logo__navbar__fixed .logo {
  display: none;
}
@keyframes show__on__scroll {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  50% {
    transform: translateY(0);
    opacity: 0.5;
  }
  75% {
    transform: translateY(-50%);
    opacity: 0.75;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
/*** logo__navbar animation on scroll (end) ***/

.logo__navbar .logo {
  padding: 15px 0 20px 0;
}
.navbar {
  transition: all 2s;
}
.logo__navbar .navbar__toggler {
  display: none;
  padding: 16px;
}
.logo__navbar .navbar ul {
  display: flex;
}
.logo__navbar .navbar ul li a {
  padding: 10px 25px;
  /* padding: 10px 1.8vw; */
  display: inline-block;
  font-weight: 500;
  transition: 0.5s;
  border-radius: 5px;
}
.logo__navbar .navbar ul li a:hover {
  background: white;
  color: #bc02db;
  border-radius: 15px;
}

/* home */
.section-1 .home {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  margin-top: 70px;
  transition: all 1s;
}
.section-1 .home .description {
  text-align: center;
  margin-bottom: 50px;
}
.description h4 {
  font-weight: normal;
  text-transform: uppercase;
  padding-bottom: 15px;
}
.description h2 {
  font-weight: normal;
  font-size: 80px;
  padding-bottom: 20px;
  /* font-size: 6vw; */
}
.description p {
  max-width: 638px;
}
.section-1 .home .appStore__googleplay {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding-bottom: 40px;
}
.appStore__googleplay a {
  text-transform: uppercase;
  padding: 10px 20px;
  border-radius: 23px;
  align-items: center;
  border: 2px solid white;
  margin-bottom: 15px;
}
.appStore__googleplay a:first-child {
  margin-right: 20px;
}
.appStore__googleplay i {
  padding: 0 5px;
}
.section-1 .home .mobilePic img {
  max-width: 890px;
  width: 100%;
}

/* section-2 */
.section-2 {
  background: #2d01f7;
}
.section-2:before {
  background: #6a01f4;
}
.polygon__common__clip__path {
  color: white;
  position: relative;
}
.polygon__common__clip__path::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  clip-path: polygon(0 17%, 100% 0, 100% 100%, 0% 100%);
  z-index: 1;
  width: 100%;
  height: 101%;
}
.section__wrapper__clip__path {
  position: relative;
  z-index: 3;
  background: url(" https://websitedemos.net/alex79/wp-content/uploads/sites/600/2020/07/bg-002-free-img.png")
    no-repeat;
  background-position: center;
}
.section__wrapper__clip__path .content__within__wrapper {
  display: flex;
  justify-content: center;
  padding: 20px 20px 95px 20px;
  background-color: transparent;
  background-image: radial-gradient(
    at center center,
    #ffb700a4 0%,
    rgba(255, 255, 255, 0) 60%
  );
  max-width: 1350px;
  margin: auto;
}
.content__within__wrapper img {
  width: 100%;
  max-width: 570px;
}
.about__app .about__description {
  max-width: 570px;
  padding: 0 0px 30px 0;
}
.about__app .about__description h4 {
  text-transform: uppercase;
  font-size: 1rem;
  letter-spacing: 3px;
  font-weight: normal;
  padding-bottom: 15px;
}
.about__app .about__description h2 {
  /* font-size: 4vw; */
  font-size: 66px;
  font-weight: normal;
  padding-bottom: 10px;
  position: relative;
}
.about__app .about__description h2::before {
  width: 5vw;
  top: 93%;
}
.about__app .about__description p {
  line-height: 1.5;
  padding-top: 10px;
}
.content__within__wrapper .about__pic img {
  border-radius: 20px;
  box-shadow: 0 65px 45px -35px rgb(0 0 0 / 25%);
}

/* .section-3 */
.section-3 {
  background: #6a01f4;
}
.section-3:before {
  background-color: #8901f2;
  clip-path: polygon(0 26%, 100% 0, 100% 100%, 0% 100%);
}
.section-3 .section-3__content__wrapper {
  position: relative;
  z-index: 3;
  max-width: 1350px;
  margin: auto;
  padding-bottom: 40px;
}
.section-3 .features__title {
  padding: 20px 0 30px 10vw;
}

.features__title span {
  text-transform: uppercase;
}
.features__title h2 {
  font-size: 54px;
  font-weight: 100;
  padding: 14px 0 35px 0px;
  position: relative;
}
.features__title h2::before {
  top: 93%;
  width: 68px;
}
.section-3 .main__features {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: stretch;
}

.main__features .single__feature {
  max-width: 31%;
  box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034),
    0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06),
    0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086),
    0 100px 80px rgba(0, 0, 0, 0.12);
  background: rgba(255, 255, 255, 0.1);
  padding: 20px 25px;
  border-radius: 10px;
  margin-bottom: 15px;
}

.single__feature h2 {
  font-weight: 100;
  font-size: 2.3rem;
  padding: 15px 0 30px 0;
}
.single__feature p {
  line-height: 1.4;
}
.section-3 .integration {
  text-align: center;
  margin-top: 3rem;
}
.integration .integration__title__description {
  max-width: 578px;
  margin: auto;
}
.integration .integration__title__description h5 {
  text-transform: uppercase;
  position: relative;
  display: inline-block;
  padding-bottom: 15px;
  font-size: 1rem;
}
.integration .integration__title__description h5::before {
  width: 50px;
  top: 93%;
  left: 22%;
}
.integration .integration__title__description p {
  padding: 15px;
}
.section-3 .integration .cms__slider {
  padding-top: 30px;
}

/* andriod__slider */
.andriod__slider {
  background: #8901f2;
}
.andriod__slider::before {
  background: #a100f3;
  clip-path: polygon(0 50%, 100% 0, 100% 100%, 0% 100%);
}
.andriod__slider__wrapper {
  text-align: center;
  padding: 30px 0;
}
.andriod__slider__wrapper .swiper-container {
  width: 100%;
  padding-top: 50px;
  padding-bottom: 50px;
}

.andriod__slider__wrapper .swiper-slide {
  background-position: center;
  background-size: cover;
  width: 300px;
  height: 300px;
}
.andriod__slider__wrapper .swiper-slide img {
  width: 100%;
  border-radius: 10px;
}

/* review__ratings */
.reviews__ratings {
  background: #a100f3;
}
.reviews__ratings:before {
  background: #b100e9;
  clip-path: polygon(0 50%, 100% 0, 100% 100%, 0% 100%);
}
.reviews__ratings .reivews__ratings__wrapper {
  position: relative;
  z-index: 3;
  max-width: 1350px;
  margin: auto;
  text-align: center;
  padding: 4vw 0 4rem 0;
}
.reviews__ratings .reviews__ratings__background {
  width: 100%;
  background: url(https://websitedemos.net/alex79/wp-content/uploads/sites/600/2020/07/img-04-free-img.png);
  background-position: right;
  background-repeat: no-repeat;
  background-size: contain;
}
.reviews__ratings__background .title__rating {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
}
.reviews__ratings__background .title__rating .width__40 {
  width: 40%;
}
.title__rating > div {
  padding: 3vw 10px 8vw 10px;
}
.title__rating .title__part {
  border-right: 1px solid #bd4df7;
  text-align: left;
}
.title__rating .title__part h5 {
  text-transform: uppercase;
  letter-spacing: 3px;
  padding-bottom: 15px;
}
.title__rating .title__part p {
  font-size: 88px;
  line-height: 1.4;
  padding-bottom: 15px;
  position: relative;
}
.title__rating .title__part p::before {
  width: 20%;
  top: 100%;
}
.title__rating .rating__part h2 {
  font-size: 190px;
}
.title__rating .rating__part h5 {
  font-size: 20px;
}
.reviews__ratings__background .all__reviews {
  display: flex;
  align-items: stretch;
  justify-content: space-evenly;
  flex-wrap: wrap;
}

.reivews__ratings__wrapper .all__reviews {
  display: flex;
  justify-content: space-evenly;
  align-items: stretch;
  flex-wrap: wrap;
  position: relative;
  max-width: 90%;
  margin: auto;
}
.reviews__ratings__background .all__reviews .reviews {
  width: 30%;
  border-top: 1px solid #bd4df7;
}
.all__reviews .reviews {
  text-align: left;
  padding: 3vw 10px;
}
.all__reviews .reviews h3 {
  font-weight: 100;
  padding-bottom: 20px;
  font-size: 20px;
}
.all__reviews .reviews h4 i {
  color: gold;
}
.all__reviews .reviews p {
  padding: 30px 0 10px 0;
  font-weight: 700;
}
.all__reviews .download__option {
  background-image: linear-gradient(135deg, #f3b30e 0%, #bc02db 100%);
  margin: -50px 0 0;
  padding: 6vw 25px 60px 25px;
  border-radius: 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 0 40px 40px -20px rgb(0 0 0 / 20%);
}
.all__reviews .download__option h2 {
  padding-top: 20px;
}
.all__reviews .download__option p {
  padding-bottom: 30px;
}
.all__reviews .download__option a {
  border-radius: 24px;
  padding: 10px 25px;
  border: 1px solid white;
  text-transform: uppercase;
}

/* pricing__plans */
.pricings__plans {
  background: #b100e9;
}
.pricings__plans::before {
  background: #d100d1;
  clip-path: polygon(0 70%, 100% 0, 100% 100%, 0% 100%);
}
.pricing__wrapper {
  position: relative;
  z-index: 3;
  max-width: 1350px;
  margin: auto;
  text-align: center;
  padding: 10vw 0 8vw 0;
  background-image: radial-gradient(
    at center center,
    #ffb7009d 0%,
    rgba(255, 255, 255, 0) 60%
  );
}

.pricing__wrapper .pricing__plans__title__counter {
  display: flex;
  justify-content: center;
  width: 100%;
  align-items: center;
}
.pricing__plans__title__counter > div {
  width: 40%;
}
.pricing__plans__title__counter .pricing__plans__title h4 {
  text-transform: uppercase;
  padding-bottom: 15px;
  text-align: left;
}
.pricing__plans__title__counter .pricing__plans__title p {
  text-align: left;
  font-size: 75px;
  padding-bottom: 20px;
  position: relative;
}
.pricing__plans__title p:before {
  width: 20%;
  top: 100%;
}
.pricing__plans__title__counter .pricing__plans__counter h2 {
  font-size: 102px;
}
.pricing__plans__title__counter .pricing__plans__counter {
  font-size: 20px;
  padding-top: 15px;
  align-self: flex-end;
}
.pricing__plans__counter h5 {
  font-size: 20px;
  padding-top: 10px;
}
.pricing__wrapper .pricing__tables {
  padding-top: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8vw 0 6vw 0;
}
.pricing__tables .single__pricing {
  border: 1px solid rgba(255, 255, 255, 0.329);
  border-radius: 10px;
  padding: 20px 20px 82px;
  width: 30%;
}
.single__pricing:first-child {
  border-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.single__pricing:nth-child(2) {
  background-image: linear-gradient(135deg, #f3b30e 0%, #e500a4 100%);
  box-shadow: 0 40px 40px -20px rgb(0 0 0 / 20%);
}
.single__pricing:nth-child(2) .single__pricing__wrapper {
  padding: 10px 0 50px 0;
}

.single__pricing:last-child {
  border-left: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.single__pricing h4 {
  text-transform: uppercase;
  padding: 10px 0;
  position: relative;
  margin-bottom: 20px;
}
.single__pricing h4::before {
  width: 50px;
  top: 100%;
  left: 41%;
}
.single__pricing p {
  font-size: 136px;
  position: relative;
  text-align: left;
}
.single__pricing p span {
  font-size: 20px;
  position: absolute;
  top: 0;
}
.single__pricing p span b {
  font-size: 30px;
  display: inline-block;
}
.single__pricing ul {
  padding: 15px 68px 50px 13px;
}
.single__pricing ul li {
  padding: 15px 5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  text-align: left;
  font-size: 15px;
}
.single__pricing ul li:last-child {
  border-bottom: 0;
}
.single__pricing ul li i {
  padding-right: 10px;
}
.single__pricing a {
  border-radius: 24px;
  padding: 10px 25px;
  border: 1px solid white;
  text-transform: uppercase;
}

/* footer-section */
.footer__section {
  background-color: #d100d1;
}
.footer__section::before {
  clip-path: polygon(0 70%, 100% 0, 100% 100%, 0% 100%);
  background: #e600a4;
}
.footer__section .footer__wrapper {
  position: relative;
  z-index: 3;
  max-width: 1350px;
  margin: auto;
  text-align: center;
}
.footer__section .footer__main__content {
  max-width: 800px;
  margin: auto;
  padding-top: 120px;
}
.footer__wrapper p {
  font-size: 4rem;
}
.footer__main__content .footer__app__google {
  padding: 30px 0;
  width: 100%;
  display: flex;
  justify-content: center;
}
.footer__app__google a {
  text-transform: uppercase;
  border-radius: 30px;
  padding: 10px 20px;
  border: 1px solid white;
  display: inline-block;
  margin-bottom: 10px;
}
.footer__app__google a:first-child {
  margin-right: 10px;
}

.copyright {
  width: 100%;
  text-align: center;
  color: rgb(255, 255, 255);
  background: #e600a4;
  padding-bottom: 40px;
}

/* styles for devices under 1350px */
@media (max-width: 1350px) {
  .description h2 {
    font-size: 7vw;
  }
  .section__wrapper__clip__path .content__within__wrapper {
    padding-bottom: 7vw;
  }
  .section-3 .single__feature h2 {
    font-size: 2rem;
  }
  .section-3 .features__title h2::before {
    width: 8vw;
  }

  .title__rating .title__part p {
    font-size: 6.5vw;
  }
  .title__rating .rating__part h2 {
    font-size: 14vw;
  }
  .pricing__plans__title__counter .pricing__plans__couter h2 {
    font-size: 7.5vw;
  }
  .pricing__plans__title__counter .pricing__plans__title p {
    font-size: 5.5vw;
  }

  .pricing__tables .single__pricing {
    padding: 20px 20px 6vw;
  }
  .single__pricing p {
    font-size: 10vw;
  }
  .single__pricing ul {
    padding: 15px 5vw 50px 1vw;
  }
  .footer__section .footer__main__content {
    padding-top: 7vw;
    max-width: 600px;
  }
  .footer__wrapper p {
    font-size: 3rem;
  }
}

/* styles for devices under 992px */
@media (max-width: 992px) {
  [data-aos="rotate-c"] {
    transform: rotate(-180deg);
    transition-property: transform;
  }
  [data-aos="rotate-c"].aos-animate {
    transform: rotate(0deg);
  }
  .section-2 .about__app .about__description h2 {
    font-size: 6vw;
  }
  .about__app .about__description p {
    font-size: 14px;
  }
  .main__features .single__feature {
    max-width: 46%;
  }
  .reivews__ratings__wrapper .all__reviews {
    max-width: 95%;
  }
  .pricing__plans__title__counter .pricing__plans__title {
    text-align: left !important;
  }

  .pricing__plans__title__counter .pricing__plans__counter h2 {
    font-size: 9.5vw;
  }
  .pricing__wrapper .pricing__tables {
    padding: 11vw 0 9vw 0;
  }
  .single__pricing ul {
    padding: 15px 0vw 50px 0vw;
  }
}

/* styles for devices under 768px */
@media (max-width: 768px) {
  .section-1 .home {
    margin-top: 50px;
  }
  .section-1 .logo__navbar__home {
    background-size: cover;
  }
  .section-1 .logo__navbar {
    padding-top: 0;
  }
  .logo__navbar__fixed {
    padding: 0;
  }
  .section-1 .logo__navbar__home .logo__navbar .logo {
    padding: 20px 20px;
    align-self: flex-start;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .logo__navbar .navbar__toggler {
    display: block;
  }
  .section-1 .logo__navbar .navbar {
    width: 100%;
    transform: translateY(-100%);
    display: none;
  }
  .section-1 .logo__navbar .navbar.navbar__show {
    transform: translateY(0);
    display: block;
  }
  .section-1 .logo__navbar .navbar ul {
    flex-direction: column;
  }
  .logo__navbar .navbar ul li a {
    background: linear-gradient(172deg, #7b4397 3%, #dc2430 89%);
    border-bottom: 1px solid #00042869;
    padding: 15px 25px;
    width: 100%;
    transition: 0.5s;
  }

  .logo__navbar .navbar ul li a:hover {
    border-width: 5px;
    background: linear-gradient(
      172deg,
      rgba(0, 4, 40, 1) 3%,
      rgba(0, 78, 146, 1) 89%
    );
  }
  .description h2 {
    font-size: 10vw;
  }
  .description p {
    line-height: 1.5;
    padding: 0 25px;
    font-size: 14px;
  }
  .home .mobilePic {
    display: flex;
    justify-content: center;
  }
  .section-1 .home .mobilePic img {
    width: 95%;
  }
  .section-2 .section__wrapper__clip__path {
    background-size: 90%;
  }
  .section-2 .section__wrapper__clip__path .content__within__wrapper {
    flex-direction: column;
    align-items: center;
  }

  .section-3::before {
    clip-path: polygon(0 7%, 100% 0, 100% 100%, 0% 100%);
  }
  .section-3 .main__features .single__feature {
    max-width: 90%;
  }
  .integration .integration__title__description h5 {
    font-size: 13px;
  }

  .reviews__ratings .reviews__ratings__background {
    background-position: top;
  }

  .reviews__ratings__background .title__rating,
  .reviews__ratings__background .all__reviews {
    flex-direction: column;
  }

  .title__rating > div {
    padding: 3vw 10px 7vw 30px;
  }
  .title__rating .rating__part h2 {
    font-size: 36vw;
  }
  .reviews__ratings__background .title__rating .width__40 {
    width: 100%;
  }
  .reviews__ratings__background .all__reviews .reviews {
    width: 100%;
    padding: 7.5vw 10px;
  }

  .title__rating .title__part p {
    font-size: 10vw;
    width: 60%;
  }
  .reviews__ratings__background .all__reviews .download__option {
    width: 80%;
    margin: 34px auto auto auto;
    padding: 13vw 25px 50px 25px;
  }

  .pricing__plans__title__counter {
    flex-direction: column;
  }
  .pricing__plans__title__counter .pricing__plans__title {
    width: 90%;
  }

  .pricing__plans__title__counter .pricing__plans__counter {
    align-self: center;
    width: 100%;
    padding-top: 11vw;
  }
  .pricing__plans__title__counter .pricing__plans__title p {
    font-size: 8.5vw;
  }
  .pricing__plans__title__counter .pricing__plans__counter h2 {
    font-size: 14.5vw;
  }
  .pricing__tables .single__pricing {
    padding: 20px 15px 15vw;
    border: 1px solid rgba(255, 255, 255, 0.308);
    width: 90%;
    margin-bottom: 20px;
  }
  .pricing__wrapper .pricing__tables {
    flex-direction: column;
  }
  .single__pricing p {
    font-size: 20vw;
  }
  .single__pricing h4::before {
    left: 46%;
  }
  .single__pricing ul {
    padding: 15px 4vw 50px 4vw;
  }
  .single__pricing:nth-child(2) .single__pricing__wrapper {
    padding: 0;
  }

  .footer__section .footer__main__content {
    max-width: 300px;
  }
  .footer__wrapper p {
    font-size: 4.3vw;
  }
}

/* styles for devices under 578px */

@media (max-width: 578px) {
  .section-1 .logo__navbar .logo img {
    width: 120px;
  }
  .description h4 {
    font-size: 14px;
  }
  .integration .integration__title__description {
    padding: 0;
  }
  .andriod__slider__wrapper .swiper-slide img {
    width: 90%;
  }

  .pricing__plans__title__counter .pricing__plans__title p {
    font-size: 10vw;
  }
  .pricing__plans__counter h5 {
    font-size: 14px;
  }

  .single__pricing h4::before {
    left: 42%;
  }
  .footer__main__content .footer__app__google {
    flex-direction: column;
    width: 70%;
    margin: auto;
  }
  .footer__wrapper p {
    font-size: 1rem;
  }
  .copyright {
    font-size: 12px;
  }
}