/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: #5271ff;
  overflow-x: hidden;
  color: white;
  font-family: "Poppins", sans-serif;
  padding: 2rem;
}
/* .rectangle {
  position: absolute;
  width: 1600px;
  height: 600px;
  top: 62px;
  background: #5271FF;
  transform: rotate(-15deg);
  left: 90px;
  border-radius: 50px;
} */

.notification {
  position: fixed;
  top: 15%;
  right: 0%;
  background-color: white;
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
  padding: 0.5rem;
  text-align: center;
  padding-left: 0.5rem;
  padding-right: 0rem;
}
.notification a {
  text-decoration: none;
}

.content12 {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  top: 25%;
  width: 85%;
  height: 65vh;
  margin: 0 0%;
  left: 6%;
}

.adv {
  height: 100%;

  width: 100%;
}
.first h3 {
  margin-top: 0.5cm;
  font-weight: 200;
  font-size: 1rem;
}

.first {
  /* background-color: black; */
  height: 100%;
  width: 40%;
}

.first h2 {
  font-size: 1.5rem;
  margin-top: 3rem;
}

.first p {
  margin-top: 2rem;
}

.first h1 {
  font-weight: bolder;
}

.first button {
  color: #5271ff;
  border-radius: 10px;
  background-color: white;
  border: none;
  padding: 0.1cm 0.5cm;
  margin-top: 1.5rem;
  font-size: 0.5cm;
  font-weight: 600;
}

.first button a {
  text-decoration: none;
}

.first button:hover {
  background-color: #5271ff;
  color: white;
  -webkit-transition: 0.5s all ease-in-out;
  -o-transition: 0.5s all ease-in-out;
  transition: 0.5s all ease-in-out;
}

.second {
  width: 60%;
  /* border: 1px solid white; */
  position: relative;
  top: 0%;
  right: 1%;
  left: 5%;
}
nav {
  /* position: absolute; */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.logocontainer {
  /* border: 5px solid rebeccapurple; */
  margin: 0 auto;
}
.logo {
  width: 140px;
  border-radius: 10px;
  height: 100%;
}

nav ul li {
  display: inline-block;
  list-style: none;
  margin: 10px 20px;
}

nav ul li a {
  color: white;
  text-decoration: none;
  font-size: 18px;
  position: relative;
}

.footer nav ul li a {
  color: #5271ff;
}

.footer nav ul li a::after {
  background: #5271ff;
}

nav ul li a::after {
  content: "";
  width: 0;
  height: 3px;
  background: white;
  left: 0;
  bottom: -6px;
  position: absolute;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}

nav ul li a:hover::after {
  width: 100%;
}

nav button {
  font-weight: bold;
  background-color: white;
  border-radius: 10px;
  border: none;
  margin-bottom: 1rem;
  height: 30px;
  width: 100px;
  font-size: 1.2rem;
}
nav button a {
  text-decoration: none;
  color: #5271ff;
}

.frame1 {
  /* position: relative;
  background-color: brown;
  width: 50%;
  height: 40%;
  border-radius: 5px;
  border: 1px solid #ffffff; */
  position: absolute;
  width: 40%;
  height: 40%;
  top: 0%;
  left: 0%;
  border: 1px solid white;
}

.frame2 {
  /* position: relative;
  background-color: aqua;
  width: 50%;
  right: -20%;
  top: -20%;
  border-radius: 5px;
  border: 1px solid #ffffff; */
  position: absolute;
  height: 40%;
  width: 40%;
  border: 1px solid white;
  top: 25%;
  left: 25%;
}

.frame3 {
  /* position: absolute;
  position: absolute;
  width: 21%;
  height: 427px;
  right: 0%;
  top: 3%;
  background-color: yellow;
  border-radius: 5px;
  border: 1px solid #ffffff; */
  border: 1px solid white;
  position: absolute;
  right: 0%;
  height: 80%;
  width: 35%;
  top: 5%;
}

.frame4 {
  /* position: absolute;
  width: 25%;
  height: 223px;
  right: 30%;
  top: 60%;
  background-color: rebeccapurple;
  border-radius: 5px;
  border: 1px solid #ffffff; */
  position: absolute;
  top: 50%;
  height: 40%;
  width: 40%;
  border: 1px solid white;
}
.frame5 {
  /* position: absolute;
  width: 30%;
  height: 40%;
  right: 5%;
  top: 68%;
  border-radius: 5px;
  border: 1px solid #ffffff; */
  position: absolute;
  top: 65%;
  left: 40%;
  height: 40%;
  width: 40%;
  border: 1px solid white;
}

.playstore {
  display: inline;
}

.playstore img {
  height: 30px;
  width: 30px;
  margin-left: 15px;
}

/* ------------------------------------ */

.secondpart {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.works {
  position: absolute;
  /* width: 255px; */
  /* height: 54px; */
  left: 62%;
  top: 130%;
  width: 25%;
  /* margin-top: 30px; */
  /* border: 1px solid white; */
}

.works button a {
  text-decoration: none;
  color: #5271ff;
  font-weight: 800;
}

.works button {
  padding: 0.2cm;
  border: none;
  border-radius: 10px;
  background-color: white;
}

.oval {
  position: absolute;
  width: 55%;
  height: 40%;
  left: 5%;
  top: 130%;
  border-radius: 50%;
  background: #ffb45e;
  /* transform: rotate(-30.08deg); */
}

.iphonecontainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  /* right: 10%; */
  top: -70%;
  height: 140%;
  width: 80%;
  /* border: 10px solid black; */
  left: 8%;
}

.iphone {
  width: 80%;
  margin: 0px 20px 0 20px;
  background: #ffffff;
  position: relative;
}

.iphone:nth-child(2n) {
  margin-top: 70px;
  border-top-right-radius: 30px;
  border-top-left-radius: 30px;
}

.iphone:nth-child(2n-1) {
  border-top-left-radius: 30px;
  border-top-right-radius: 70px;
}

/* .ppic{
  border: 3px solid aqua;
  margin: auto;
  height: 5cm;
  width: 5cm;
  border-radius: 25px;
} */

.imgs1 {
  height: 120%;
  position: absolute;
  top: -3%;
}

.imgs2 {
  position: absolute;
  height: 140%;
  top: -3%;
  left: -1%;
}

.imgs3 {
  position: absolute;
  height: 120%;
  top: -3%;
}

/* .arrow{
  height: 4rem;
  width: 4rem;
  border-radius: 50%;
  background-color: #5271FF;
  border: none;
  /* position: absolute;
  /* bottom: 0px; */
/* top: 650px;
  right: 230px; */
/* margin-left: 7rem;
  margin-top: 10rem;
  color: white;
  font-size: 2rem;
/* } */

/* /--------------------------------------------------- */

.parties {
  position: absolute;
  top: 2095px;
}

/* ------------------------- */

.feature {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  top: 180%;
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(13.22%, #5271ff),
    color-stop(173.68%, #e3e8ff)
  );
  background: -o-linear-gradient(left, #5271ff 13.22%, #e3e8ff 173.68%);
  background: linear-gradient(90deg, #5271ff 13.22%, #e3e8ff 173.68%);
  /* background-color: aliceblue; */
  color: black;
  border-top-right-radius: 250px;
  border-bottom-right-radius: 250px;
  padding: 70px 0px;
  margin: 0 10%;
}

.circle {
  width: 30%;
  position: relative;
}

.icon {
  height: 11rem;
  width: 11rem;
  background-color: #5271ff;
  border-radius: 50%;
  border: 20px solid white;
  margin: auto auto;
  /* margin-right: -2cm; */
}

.icon1 {
  height: 11rem;
  width: 11rem;
  background-color: #5271ff;
  border-radius: 50%;
  border: 20px solid white;
  margin: auto auto;
}

.innericon {
  color: white;
  text-align: center;
  font-size: 600%;
}

.conten {
  color: white;
  width: 80%;
  font-size: 1rem;
}

.feature .hello {
  text-align: right;
}
.hello1 {
  text-align: left;
}
.feature2 .conten {
  text-align: right;
}

.feature1 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  /* width: 1214px; */
  /* height: 100%; */
  /* left: 113px; */
  top: 235%;
  background: -webkit-gradient(
    linear,
    right top,
    left top,
    color-stop(13.22%, #5271ff),
    color-stop(173.68%, #e3e8ff)
  );
  background: -o-linear-gradient(right, #5271ff 13.22%, #e3e8ff 173.68%);
  background: linear-gradient(-90deg, #5271ff 13.22%, #e3e8ff 173.68%);
  /* background-color: aliceblue; */
  color: black;
  border-top-left-radius: 250px;
  border-bottom-left-radius: 250px;
  padding: 70px 0px;
  margin: 0 10%;
}

.feature2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  /* height: 100%; */
  /* left: 190px; */
  top: 290%;
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(13.22%, #5271ff),
    color-stop(173.68%, #e3e8ff)
  );
  background: -o-linear-gradient(left, #5271ff 13.22%, #e3e8ff 173.68%);
  background: linear-gradient(90deg, #5271ff 13.22%, #e3e8ff 173.68%);
  /* background-color: aliceblue; */
  color: black;
  border-top-right-radius: 250px;
  border-bottom-right-radius: 250px;
  margin: 0 10%;
  padding: 70px 0px;
}

/* .feature2{
  display: none;
} */

/* ------------------------------------------ */

.footer {
  background-color: #ffffff;
  position: absolute;
  top: 450%;
  width: 100%;
  left: 0px;
}

.tips .heading {
  position: absolute;
  top: 345%;
  width: 97%;
  font-size: 5rem;
  font-weight: bolder;
  font-family: sans-serif;
  text-align: center;
}
.tips h1 span {
  background: -o-linear-gradient(359.91deg, #e70d7d 57.73%, #3726f8 97.36%);
  background: linear-gradient(90.09deg, #e70d7d 57.73%, #3726f8 97.36%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}
.tipscontainer {
  position: absolute;
  top: 345%;
  /* border: 1px solid black; */
  height: 80vh;
  width: 90vw;
  margin: 0 auto;
}
/* .safety{
  position: absolute;
  top: 30%;
  border-radius: 25px;
  padding: 20px;
  width: 30%;
}
.innersafety{
  color: #5271FF;
  padding-top: 1rem;
  font-size: 1.5rem;
  top: 0%;
  width: 100%;
  text-align: center;
}
.safety :hover {
  color: #3726F8 ;
  border-radius: 50%;
  background-color: white;
  transition: all 0.5s ease-in-out;
  padding: 1.5rem;
}
.cost{
  position: relative;
  top: 10%;
  left: 25%;
  border-radius: 25px;
  padding: 20px;
  width: 20%;
}
.innercost{
  color: #5271FF;
  padding-top: 1rem;
  font-size: 1.5rem;
  top: 0%;
  width: 100%;
  text-align: center;
}
.cost :hover {
  color: #3726F8 ;
  border-radius: 50%;
  background-color: white;
  transition: all 0.5s ease-in-out;
  padding: 1rem;
}
.distance h1{
  font-size: 3rem;
  position: absolute;
  top: 45%;
  left: 35%;
}
.crowd{
  position: absolute;
  top: 70%;
  left: 40%;
  border-radius: 25px;
  padding: 20px;
  width: 60%;
}
.innercrowd{
  color: #5271FF;
  padding-top: 1rem;
  font-size: 1.5rem;
  top: 0%;
  width: 100%;
  text-align: center;
}
.crowd :hover {
  color: #3726F8 ;
  border-radius: 22%;
  background-color: white;
  transition: all 0.5s ease-in-out;
  padding: 1.5rem;
}
.social{
  position: absolute;
  top: 45%;
  left: 70%;
  border-radius: 25px;
  padding: 20px;
  width: 35%;
}
.innersocial{
  color: #5271FF;
  padding-top: 1rem;
  font-size: 1.5rem;
  top: 0%;
  width: 100%;
  text-align: center;
}
.social :hover {
  color: #3726F8 ;
  border-radius: 30%;
  background-color: white;
  transition: all 0.5s ease-in-out;
  padding: 1.5rem;
}

.exp{
  position: absolute;
  top: 15%;
  left: 75%;
  border-radius: 25px;
  padding: 20px;
}
.innerexp{
  color: #5271FF;
  padding-top: 1rem;
  font-size: 1.5rem;
  top: 0%;
  width: 100%;
  text-align: center;
}
.exp :hover{
  color: #3726F8 ;
  border-radius: 50%;
  background-color: white;
  transition: all 0.5s ease-in-out;
  padding: 1.5rem;
} */

/* ------------------------------------------- */

/* For cards */

.card {
  --bg: #5271ff;
  --hover-bg: white;
  --hover-text: #e50087;
  /* max-width: 23ch; */
  text-align: center;
  background: inherit;
  padding: 1em;
  padding-block: 1.8em;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
  -webkit-transition: 0.5s cubic-bezier(0.6, 0.4, 0, 1),
    -webkit-transform 0.15s ease;
  transition: 0.5s cubic-bezier(0.6, 0.4, 0, 1), -webkit-transform 0.15s ease;
  -o-transition: 0.5s cubic-bezier(0.6, 0.4, 0, 1), transform 0.15s ease;
  transition: 0.5s cubic-bezier(0.6, 0.4, 0, 1), transform 0.15s ease;
  transition: 0.5s cubic-bezier(0.6, 0.4, 0, 1), transform 0.15s ease,
    -webkit-transform 0.15s ease;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1em;
  border: none;
}

.card__body {
  color: white;
  line-height: 1.5em;
  font-size: 1rem;
}

.card > :not(span) {
  -webkit-transition: 0.5s cubic-bezier(0.6, 0.4, 0, 1);
  -o-transition: 0.5s cubic-bezier(0.6, 0.4, 0, 1);
  transition: 0.5s cubic-bezier(0.6, 0.4, 0, 1);
}

.card > strong {
  display: block;
  font-size: 2rem;
  letter-spacing: -0.035em;
}

.card span {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: var(--hover-text);
  border-radius: 5px;
  font-weight: bold;
  top: 100%;
  -webkit-transition: all 0.5s cubic-bezier(0.6, 0.4, 0, 1);
  -o-transition: all 0.5s cubic-bezier(0.6, 0.4, 0, 1);
  transition: all 0.5s cubic-bezier(0.6, 0.4, 0, 1);
}

.card:hover span {
  top: 0;
  font-size: 1.2em;
}

.card:hover {
  background: var(--hover-bg);
}

.card:hover > div,
.card:hover > strong {
  opacity: 0;
}

/* ----------------------------------------------- */

.safety {
  position: absolute;
  top: 40%;
  left: 30%;
}
.cost {
  position: absolute;
  top: 65%;
  width: 14%;
  left: 29%;
}

.distance {
  position: absolute;
  top: 85%;
  left: 30%;
}
.crowd {
  position: absolute;
  top: 40%;
  left: 50%;
}
.social {
  position: absolute;
  top: 65%;
  left: 50%;
}

.exp {
  position: absolute;
  top: 85%;
  left: 50%;
}

.lighting:first-child {
  /* position: fixed; */
  position: absolute;
  height: 50%;
  width: 102%;
  top: 375%;
  left: -2%;
  /* left: -2%; */
  /* height: 20%; */
  /* height: 100%; */
  /* width: 80%; */
  /* display: none; */
}

/* For small screen */

nav .fa-solid {
  display: none;
}

@media only screen and (max-width: 450px) {
  body {
    padding: 0;
    margin: 0;
    overflow-x: hidden;
  }
  /* nav .fa-solid {
    display: block;
    font-size: 25px;
    position: absolute;
    top: 7%;
    right: 8%;
  }
  nav ul {
    background: white;
    position: fixed;
    top: 0;
    right: -200px;
    width: 200px;
    height: 100vh;
    padding-top: 50px;
    z-index: 2;
    transition: 0.5s;
    color: #5271ff;
  }
  nav ul li {
    display: block;
    margin: 25px;
  }
  nav ul li a {
    color: #5271ff;
  }
 */
  /* nav ul .fa-solid {
    position: absolute;
    top: 25px;
    cursor: pointer;
  }
  nav ul li a::after {
    background-color: #5271ff;
  } */
  .logocontainer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100vw;
    /* border: 1px solid aqua; */
    top: 0%;
    left: 0%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    /* margin: 10% 0%; */
    margin-left: 4%;
    margin-top: 10%;

    /* align-items: center; */
  }
  /* nav button {
    position: absolute;
    top: 135px;
    right: 30px;
  } */
  .content12 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    /* border: 1px solid white; */
    height: 95vh;
    width: 93vw;
    position: relative;
    top: 0%;
    margin: 2%;
    left: 0%;
  }
  .first {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    /* justify-content: center; */
    /* border: 10px solid aqua; */
    height: 15%;
    width: 100%;
  }

  .first h1 {
    /* position: absolute; */
    font-size: 200%;
    /* width: 100%; */
    text-align: center;
    font-weight: 900;
    /* height: 100%; */
    /* margin-bottom: 10%; */
    /* border: 1px solid black; */
  }
  .first h3 {
    text-align: center;
    font-size: 1.5rem;
    width: 100%;
  }
  .first button {
    font-size: 1rem;
    width: 100%;
    margin-left: 0%;
  }
  .first h2 {
    text-align: center;
  }
  .first p {
    text-align: center;
    margin-top: 7%;
  }
  .playstore {
    margin-left: 4%;
  }
  .info {
    position: absolute;
    bottom: 0%;
    left: 0%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-left: 10%;
    margin-right: 10%;
    margin-bottom: 0%;
    /* border: 1px solid black; */
  }
  .second {
    /* border: 1px solid black ; */
    /* height: 160%; */
    /* border: 5px solid yellow; */
    height: 100%;
    width: 100%;
    position: relative;
    left: 0%;
  }
  .frame1 {
    position: absolute;
    left: 0%;
    top: 6%;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    max-width: 100%;
    height: auto;
    /* width: max-content; */
    border: 1px solid #ffffff;
  }
  .frame2 {
    position: absolute;
    left: 30%;
    top: 19%;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    max-width: 100%;
    height: auto;
    border: 1px solid #ffffff;
  }
  .frame3 {
    position: absolute;
    right: 0%;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    max-width: 100%;
    height: auto;
    top: 5%;
    border: 1px solid #ffffff;
  }
  .frame4 {
    position: absolute;
    top: 29%;
    left: 0%;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    max-width: 100%;
    height: auto;
    border: 1px solid #ffffff;
  }
  .frame5 {
    position: absolute;
    right: 10%;
    top: 32%;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    max-width: 100%;
    height: auto;
    border: 1px solid #ffffff;
  }
  .info {
    /* display: none; */
    /* flex-direction: column; */
  }
  /* .iphonecontainer{
      display: none;
  } */

  .secondpart {
    /* border: 1px solid; */
    height: 50vh;
    position: relative;
  }
  .oval {
    height: 18%;
    width: 50%;
    position: absolute;
    top: 20%;
    left: 10%;
  }
  .works {
    width: inherit;
    position: absolute;
    height: inherit;
    top: 00%;
    right: 0%;
    /* border: 1px solid purple; */
  }
  .works h1 {
    position: absolute;
    top: 20%;
    width: 100%;
    font-size: 1.8rem;
    /* border: 1px solid pink; */
  }
  .works p {
    /* position: absolute; */
    top: 35%;
    position: absolute;
    left: -130%;
    width: 200%;
  }

  .works button {
    display: none;
  }

  .iphonecontainer {
    /* border: 1px solid black; */
    height: 100%;
    width: 50%;
    top: -30%;
    left: 6%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    /* bottom: 5%; */
    /* height: 50%;
      width: 100%; */
    /* top: 30%;
      left: -20%; */
  }
  .iphone {
    position: absolute;
    height: 68%;
    width: 25%;
    /* top: -5%; */
    /* top: 0%; */
    /* margin: 1cm; */
    /* margin: 0px;
      padding: 0px;
      background-color: #E3E8FF;
      height: 10px;
      width: 30px; */
  }
  .iphone:nth-child(2n) {
    left: 52%;
    margin-top: 0px;
    top: 25%;
  }
  .iphone:nth-child(2n-1) {
    /* top: -90%; */
    left: 15%;
  }
  .iphone:nth-child(3n) {
    left: 90%;
  }
  .imgs1 {
    height: -webkit-fit-content;
    height: -moz-fit-content;
    max-width: 100%;
    height: auto;
    position: absolute;
    top: -1%;
    left: 0%;
  }
  .imgs2 {
    height: -webkit-fit-content;
    height: -moz-fit-content;
    max-width: 100%;
    height: auto;
    position: absolute;
    left: 0%;
    top: -1%;
    /* left: 60%; */
  }
  .imgs3 {
    mix-blend-mode: multiply;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    max-width: 100%;
    height: auto;
    position: absolute;
    top: -1%;
    left: 00%;
  }
  /* .imgs1 , .imgs2 , .imgs3 {
      display: none;
  } */

  /* .secondpart{
      display: none;
  } */
  /* .notification {
    display: none;
  } */
  /* .tips {
    display: none;
  } */

  .features {
    /* position: relative; */
  }

  .feature {
    /* position: absolute;
    top: 160%; */
    /* left: 9%; */
    /* width: 85%; */
    /* height: 50%; */
    /* padding: 0;
    background: linear-gradient(90deg, #5271ff 13.22%, #e3e8ff 173.68%); */
    /* border: 1px solid red; */
    /* margin: 0% 0%; */
    /* margin: 5%; */
    /* flex-direction: column; */
    /* padding: 0%;
    margin-left: 5%; */
    top: 175%;
    height: 29%;
    padding: 13% 0;
    /* margin: 0px; */
  }
  .feature .circle {
    position: absolute;
    left: 35%;
    top: -15%;
  }
  .feature .icon1 {
    position: absolute;
    /* left: -170%; */
    /* bottom: 98%; */
    height: 5rem;
    width: 5rem;
    padding: 5%;
    /* top: -100%; */
    border: 12px solid white;
    top: 0%;
    left: 0%;
  }
  .innericon {
    font-size: 2rem;
  }
  .feature1 .conten {
    margin-left: 13%;
  }
  .feature .conten p {
    font-size: 0.65rem;
    height: 100%;
    width: 100%;
    /* right: 0%; */
    /* left: 0%; */
    /* top: 0%; */
  }
  .feature .conten h2 {
    font-size: 1.5rem;
  }
  .feature1 {
    /* position: absolute;
    top: 213%;
    left: 8%;
    left: 7%            ;
    width: 90%;
    height: 40%;
    padding: 0;
    right: 20%;
    background: linear-gradient(-90deg, #5271ff 13.22%, #e3e8ff 173.68%);
    flex-direction: column                 ;
    padding: 0%;
    margin: 0%; */
    top: 210%;
    /* width: 100%; */
    /* margin: 0%; */
    height: 29%;
    padding: 13% 0;
    /* left: 0%; */
    /* margin: 0 10%; */

    /* top: 165%;
    height: 29%;
    padding: 13% 0; */
  }
  .feature1 .circle {
    position: absolute;
    top: -15%;
    right: 35%;
  }
  .feature1 .icon {
    /* top: -15%;
    left: 33%;
    height: ;
    width: 35%;
    padding: 1%;
    border: 12px solid white; */

    position: absolute;
    /* left: -170%; */
    /* bottom: 0%; */
    top: 0%;
    left: 0%;
    height: 5rem;
    width: 5rem;
    padding: 5%;
    /* top: -100%; */
    border: 12px solid white;
  }
  .feature1 .conten p {
    font-size: 0.65rem;
    height: 100%;
    width: 100%;
    left: 0%;
    top: 0%;
    right: 0%;
  }
  .feature1 .hello1 {
    font-size: 1.5rem;
    /* left: 10%; */
  }
  .feature1 p {
    font-size: 0.8rem;
  }
  .feature2 {
    position: absolute;
    top: 245%;
    height: 29%;
    padding: 13% 0;
    /* flex-direction: column; */

    /* top: 165%;
    height: 29%;
    padding: 13% 0; */
  }
  .feature2 .circle {
    position: absolute;
    left: 35%;
    top: -15%;
  }
  .feature2 .icon1 {
    position: absolute;
    /* top: -85%; */
    top: 0%;
    left: 0%;
    height: 5rem;
    width: 5rem;
    padding: 5%;
    border: 12px solid white;
  }
  /* .feature2 .conten {
    position: absolute;
    top: 23%;
    text-align: right;
  } */

  .feature2 .conten p {
    font-size: 0.65rem;
    height: 100%;
    width: 100%;
    left: 0%;
    top: 0%;
    right: 0%;
  }
  .feature2 .hello1 {
    font-size: 1.5rem;
  }
  .feature2 p {
    font-size: 0.8rem;
    text-align: right;
  }

  .tips .heading {
    top: 325%;
    font-size: 1.5rem;
  }
  .tipscontainer {
    /* border: 10px solid white; */
    top: 340%;
    left: 5%;
    height: 100vh;
  }
  .safety {
    left: 0;
    top: 0;
    /* height: 0%; */
    width: 100%;
  }
  .crowd .card > strong {
    font-size: 1.5rem;
  }
  .cost {
    left: 0;
    top: 20%;
    width: 100%;
  }
  .social {
    top: 40%;
    left: 6%;
  }
  .social .card > strong {
    font-size: 1.79rem;
  }
  .exp {
    top: 65%;
    left: 0;
    width: 100%;
  }
  .distance {
    top: 80%;
    width: 100%;
    left: 0%;
  }
  .crowd {
    top: 97%;
    left: 0;
    width: 100%;
  }
  .footer {
    /* bottom: 0%; */
    top: 462%;
    width: 100%;
  }

  /* .features{
      display: none;
      .feature{
          display: flex;
          position: absolute;
          width: 1214px;
          height: 100%;
          left: 190px;
          top: 1500px;
          background: linear-gradient(90deg, #5271FF 13.22%, #E3E8FF 173.68%);
          background-color: aliceblue;
          color: black;
          border-radius: 250px;
          padding: 70px 0px !important ;
      }
      

  } */
  /* .feature2{
    display: none;
  } */
  /* .container12 {
    display: none;
  } */
}

@media only screen and (max-height: 600px) {
  .info h3 {
    display: none;
  }
  .works {
    width: 40%;
  }
  .feature {
    top: 180%;
  }
  .feature1 {
    top: 270%;
    /* height: 70%; */
  }
  .feature2 {
    top: 370%;
  }
  .tips .heading {
    top: 450%;
  }
  .tipscontainer {
    /* border: 5px solid white; */
    top: 470%;
    /* height: 140vh; */
    /* width: 80%; */
  }
  /* .tipscontainer{
    display: none;
  } */
  .cost {
    top: 30%;
  }
  .distance {
    top: 60%;
  }
  .exp {
    top: 85%;
  }
  .social {
    top: 110%;
  }
  .social .card > strong {
    font-size: 1.5rem;
  }
  .crowd {
    top: 150%;
  }
  .footer {
    top: 680%;
    width: 101.59%;
  }
  .notification {
    /* display: none; */
  }
}