@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,500;0,600;0,700;1,200&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100;200;300;400;500&display=swap');

:root {
  --primary-color: #601a97;
  --primary-grdiant: linear-gradient(225deg, #7b1fa2, #4d178f);
  --primary-mobo-grdiant: linear-gradient(225deg, #8428ed, #4d178f);
  --offer-gradiant: linear-gradient(180deg, #fcb72d, #f51371);
  --gap: 2rem;
}
* {
  margin: 0;
  padding: 0 10;
}
body {
  /* background-color: var(--primary-color); */
  background-image: var(--primary-grdiant);
  font-family: 'Roboto', sans-serif;
}

.firstPage {
  width: 100%;
  height: 100%;
  min-height: 93vh;
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  gap: 2rem;
}

.download-buttons {
  display: flex;
}
.download-buttons img {
  height: 60px;
  transition: all 0.1s ease-in;
}
.download-buttons img:hover {
  transform: translate(2px, 2px);
}

.inf-search-img img {
  width: 85%;
}
.first-text {
  padding: 0 10%;
}
.first-text h1 {
  font-family: 'Poppins';
  font-weight: 700;
  color: #fff;
  font-size: 4.3em;
}
.first-text p {
  font-size: 1.2em;
  font-weight: 300;
  margin-bottom: 20px;
  font-family: 'Roboto';
  color: #fff;
  padding-right: 40px;
}
.first-text h2 {
  font-family: 'Poppins';
  font-size: 1.3em;
  color: #fff;
  margin-bottom: 20px;
}
.free-offer {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 9vh;
  background-image: var(--offer-gradiant);
}
.free-offer p {
  font-family: 'Poppins';
  font-size: 1.3em;
  font-weight: 800;
  color: #fff;
  text-align: center;
  padding: 0 5%;
}
.secondPage {
  width: 100%;
  height: 100%;
  min-height: 75vh;
  position: relative;
  display: grid;
  background-color: #fff;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  gap: 2rem;
}
.sec-text {
  padding: 0 10%;
  margin-top: 30px;
}
.sec-text h1 {
  font-family: 'Poppins';
  font-weight: 700;
  color: #fff;
  background: linear-gradient(90deg, #7f00ff 22%, #e100ff 60.78%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 3.3em;
  margin-bottom: 10px;
}

.sec-text p {
  color: var(--primary-color);
  font-size: 1.2em;
  font-weight: 400;
  margin-bottom: 20px;
  font-family: 'Roboto';
}
.map-img img {
  width: 90%;
}
.thirdPage {
  width: 100%;
  height: 100%;
  margin-top: 40px;
  padding-top: 20px;
}
.third-text h1 {
  font-family: 'Poppins';
  font-weight: 700;
  text-align: center;
  font-size: 3em;
  color: #fff;
}
.third-text p {
  text-align: center;
  font-size: 1.2em;
  color: #fff;
  font-weight: 400;
  font-family: 'roboto';
}

.category-wrraper {
  max-width: 100vw;
  margin-bottom: 90px;
  margin-top: 60px;
  display: flex;
  overflow: hidden;
}
.category {
  display: flex;
  gap: var(--gap);
  margin-left: 80px;
  animation: moveCategory 30s linear infinite;
}
@keyframes moveCategory {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
.category a {
  padding: 5px 30px;
  flex-shrink: 0;
  border: 0.1px solid transparent;
  border-color: #fff;
  border-radius: 20px;
  font-size: 1.2em;
  color: #fff;
  font-weight: 400;
  font-family: 'Roboto';
  box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px,
    rgba(0, 0, 0, 0.09) 0px 8px 4px;
}
.fourthPage {
  width: 100%;
  height: 100%;
  min-height: 60vh;
  position: relative;
  display: grid;
  background-color: #fff;
  grid-template-columns: 1.5fr 2.5fr;
  align-items: center;
  justify-content: space-around;
  gap: 2rem;
}
.fourth-text {
  padding: 0 5%;
}
.fourth-text h1 {
  font-size: 55px;
  font-weight: 700;
  font-family: 'poppins';
  background: linear-gradient(90deg, #3a0272 22%, #3a0272 60.78%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
#inside-text {
  font-size: 55px;
  font-weight: 700;
  font-family: 'poppins';
  background: linear-gradient(90deg, #7f00ff 22%, #e100ff 60.78%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.fourth-text p {
  font-size: 1.2em;
  font-weight: 500;
  margin-top: 10px;
  color: var(--primary-color);
  font-family: 'Roboto';
}
.collab-img img {
  width: 100%;
}

.fifthPage {
  position: relative;
  display: grid;
  /* background-color: #fff; */
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  justify-content: space-around;
  gap: 2rem;
}
.fifth-text {
  padding: 0 10%;
}

.fifth-text h1 {
  font-size: 3.4em;
  font-weight: 700;
  font-family: 'poppins';
  color: #fff;
}
.fifth-text p {
  font-size: 1.3em;
  font-weight: 300;
  color: #fff;
  margin-top: 10px;
  margin-bottom: 40px;
  font-family: 'Roboto';
}
.fifth-img img {
  width: 80%;
}
.about-us {
  width: 100%;
  min-height: 42vh;
  background-color: #fff;
  position: relative;
  display: grid;
  padding-top: 25px;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}
.help-container {
  align-items: center;
  padding: 0 20%;
}
.help-container h1 {
  font-size: 3em;
  font-weight: 700;
  font-family: 'Montserrat';
  background: linear-gradient(90deg, #7f00ff 22%, #e100ff 60.78%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 20px;
  margin-top: 10px;
}
.box-text {
  font-size: 0.9em;
  font-weight: 500;
  font-family: 'Roboto';
  color: #8a0beb;
}
.help-container a {
  font-size: 0.9em;
  color: #484848;
  font-weight: 500;
  font-family: 'Montserrat';
  margin-top: 10px;
  margin-bottom: 20px;
  text-decoration: none;
}
.join-team-container {
  padding: 0 20%;
}
.join-team-container h1 {
  font-size: 3em;
  font-weight: 700;
  font-family: 'Montserrat';
  background: linear-gradient(90deg, #7f00ff 22%, #e100ff 60.78%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 30px;
  margin-top: 20px;
}
.join-team-container p {
  font-size: 1em;
  font-family: 'Roboto';
  font-weight: 500;
  color: #500e93;
  margin-bottom: 30px;
}
.join-team-container a {
  font-size: 0.9em;
  font-weight: 400;
  color: #484848;
  font-family: 'Roboto';
  text-decoration: none;
}

@media (max-width: 1073px) {
  .inf-search-img img {
    transition: all 0.34s ease;
  }
}

@media (max-width: 880px) {
  .firstPage {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding-bottom: 30px;
  }
  .inf-search-img img {
    padding-left: 6%;
    transition: all 0.34s ease;
  }

  .first-text {
    padding-top: 20%;
    transition: all 0.55s ease-in;
  }
  .first-text p {
    font-size: 0.9em;
  }

  .first-text h2 {
    font-size: 1em;
    transition: all 0.55s ease-in;
    margin-bottom: 10px;
  }
  .secondPage {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .sec-text p {
    font-size: 1.3em;
  }
  .map-img {
    margin-bottom: 10px;
  }
  .third-text h1 {
    font-size: 2.5em;
  }
  .fourthPage {
    grid-template-columns: 1fr;
    transition: all 0.55s ease-in;
  }
  .fourth-text {
    padding: 5% 10%;
  }
  .fourth-text h1 {
    font-size: 40px;
  }
  #inside-text {
    font-size: 40px;
  }
  .fourth-text p {
    font-size: 1em;
  }
  .fifthPage {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .fifth-img {
    width: 85%;
    margin-left: 60px;
  }
  .fifth-text {
    padding: 5% 10%;
  }
  .fifth-text h1 {
    font-size: 3.1em;
  }
  .fifth-text p {
    font-size: 1.2em;
  }
  .help-container {
    padding: 0 7%;
  }
  .help-container {
    padding: 0 10%;
  }
  .help-container h1 {
    font-size: 2.3em;
  }
  .join-team-container {
    padding: 0 10%;
  }
  .join-team-container h1 {
    font-size: 2.3em;
    margin-bottom: 20px;
  }
  .join-team-container p {
    font-size: 1em;
    font-weight: 400;
  }
}

@media (max-width: 500px) {
  body {
    /* background-color: var(--primary-color); */
    background-image: var(--primary-mobo-grdiant);
  }
  .download-buttons img {
    height: 42px;
    transition: all 0.1s ease-in;
  }
  .first-text h1 {
    font-size: 2.3em;
    transition: all 0.55s ease-in;
  }
  .first-text h2 {
    font-size: 1em;
    transition: all 0.55s ease-in;
  }
  .sec-text h1 {
    font-size: 2em;
  }

  .third-text h1 {
    font-size: 1.5em;
  }
  .category a {
    font-size: 1em;
  }
  .fourth-text {
    padding: 5% 5%;
  }
  .fourth-text h1 {
    font-size: 23px;
  }
  #inside-text {
    font-size: 24px;
  }
  .fourth-text p {
    font-size: 0.9em;
    padding-right: 10px;
  }
  .fifth-text h1 {
    font-size: 1.7em;
  }
  .fifth-text p {
    font-size: 1em;
  }
  .about-us {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding-bottom: 90px;
  }
  .join-team-container h1 {
    margin-top: 0;
  }
  .join-team-container p {
    font-size: 0.8em;
    font-weight: 400;
    margin-bottom: 20px;
  }
  .join-team-container a {
    font-size: 0.8em;
  }
}