@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");

* {
  margin: 0px;
  padding: 0px;
  font-family: "Poppins";
}
body {
  background-color: #f5f5f5;
}

.containero {
  max-width: 1200px;
  width: 80%;
  margin: auto;
}

.feature__top__banner {
  width: 100%;
  height: auto;
  padding: 2% 0;
  box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
}

.feature__head__text {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 35px;
  font-family: "Oswald";
  color: black;
}
.feature__head__text .text__resize {
  font-family: "Oswald";
}
.flags {
  display: flex;
  align-items: center;
  gap: 10%;
}
.featured__head__description {
  padding: 5% 0 7% 0;
  text-align: center;
}

.featured__head__description h1,
.bhag__alada h1 {
  font-weight: 600;
  font-size: 65px;
  font-family: "Oswald";
  padding-bottom: 5%;
  color: black;
}

.featured__head__description p,
.bhag__alada p {
  font-size: 25px;
  font-family: "Poppins";
  line-height: 25px;
  color: black;
  letter-spacing: 1px;
  line-height: 45px;
}
.first__app__page {
  background-image: url(images/back.png);
  background-size: cover;
  background-position: center;
}
.btnn {
  background-color: #2d3bed;
  display: grid;
  align-items: center;
  grid-template-columns: 1fr 0.35fr;
  gap: 10%;
  border: none;
  color: white;
  padding: 1% 5%;
  cursor: pointer;
  border-radius: 50px;
  margin: 5% 0;
  box-shadow: 5px 15px 30px #626bf0c8;
  transition: 0.6s;
}
.btnn p {
  color: white;
  font-family: "poppins";
  font-weight: 600;
  font-size: 18px;
}
.btnn i {
  font-size: 20px;
}
.btnn:hover {
  padding: 1% 7%;
}
a {
  text-decoration: none;
  margin: 0;
  padding: 0;
}
.featured__wraper1 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7%;
  align-items: center;
  padding: 4% 0;
  color: white;
}
.featured__wraper1 h1 {
  color: rgba(255, 255, 255, 0.912);
}
.featured__wraper1 p {
  color: rgba(255, 255, 255, 0.827);
}
.featured__wraper2 {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 10%;
  align-items: center;
  padding: 7% 0;
}
.gradient__app__back {
  background: linear-gradient(45deg, #1927e0, #d612f7);
}
.bhag__alada p {
  padding: 0 17% 0 0;
}

.featured__wraper1 img,
.featured__wraper2 img {
  border-radius: 10px;
}

.app-img {
  text-align: center;
}

.desktop-hide {
  display: none;
}

.phone-hide {
  display: block;
}

.links__all__social {
  background-color: #5300ee;
}
.fit__elements {
  text-align: center;
  padding: 3% 0;
}
.fit__elements h1 {
  font-size: 60px;
  font-family: "oswald";
  color: rgba(255, 255, 255, 0.919);
}

.fit__elements p {
  color: rgba(255, 255, 255, 0.865);
  font-size: 25px;
  letter-spacing: 1px;
  padding: 1% 0;
}
.social__here {
  display: flex;
  justify-content: center;
  gap: 2%;
  align-items: center;
  padding-top: 2%;
}
.gol__fit__content {
  width: 70px;
  height: 70px;
  border-radius: 50px;
  background-color: rgba(255, 255, 255, 0.571);
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  transform: scale(1);
  transition: 0.6s;
}
.gol__fit__content:hover {
  transform: scale(1.1);
}

.gol__fit__content i {
  color: white;
  font-size: 30px;
}
.footer__end {
  background-color: rgba(0, 0, 0, 0.96);
  padding: 2% 0;
}
.footer {
  text-align: center;
}
.footer h2,
.footer h3,
.footer h3 a {
  color: rgba(255, 255, 255, 0.458);
  font-size: 15px;
  font-weight: 400;
  transition: 0.7s;
}

.footer h3 a:hover {
  color: #1927e0;
}
/*--==========///////responsive style here/////////==========-*/
@media (max-width: 900px) {
  .featured__head__description h1,
  .bhag__alada h1,
  .fit__elements h1 {
    font-size: 30px;
  }

  .featured__head__description p,
  .bhag__alada p,
  .fit__elements p {
    line-height: normal;
    font-size: 13px;
  }
  .social__here {
    gap: 4%;
  }
  .gol__fit__content {
    height: 40px;
    width: 40px;
  }
  .gol__fit__content i {
    font-size: 18px;
  }
  .featured__wraper1,
  .featured__wraper2 {
    grid-template-columns: 1fr;
  }

  .desktop-hide {
    display: block;
  }

  .phone-hide {
    display: none;
  }

  .featured__wraper2 {
    margin: 10% 0;
  }
  .feature__top__banner {
    padding: 2% 0 4% 0;
  }
  .feature__head__text {
    font-size: 20px;
    display: grid;
    grid-template-columns: 1fr 0.5fr;
    align-items: center;
  }
  .flags a img {
    width: 50%;
  }
  .flags {
    gap: 0;
  }
  .btnn {
    padding: 3% 7%;
  }
  .btnn i {
    font-size: 17px;
  }
  .featured__wraper2 {
    margin-bottom: 25%;
  }
  .gradient__app__back {
    padding: 10% 0 20% 0;
  }
  .footer__end {
    padding: 5% 0;
  }
  .footer h2,
  .footer h3,
  .footer h3 a {
    font-size: 11px;
  }
}