hpage2-m.css

main {
  margin-top: 180px;
}

body {
  font-family: Roboto, Arial, Helvetica, sans-serif;
}
/* Part -2 */
#parent9 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* gap:450px; */
  background-color: #f0f1f7;
  /* margin-top: -20px; */
  margin-bottom: -30px;
}
#parent9 > div {
  display: flex;
}
#parent9 > div > div {
  margin-left: 5px;
}
#parent9 > div > div > p {
  padding-top: 5px;
}
#parent9-2 > div h4 > span > img {
  width: 15px;
}
#parent9-1 {
  margin-top: -20px;
  background-color: #f0f1f7;
}
#parent9-2 {
  margin-top: -20px;
  background-color: #f0f1f7;
}
#parent9-2 {
  text-align: end;
  justify-content: end;
}

/* Part -1 */

#parent11 {
  display: flex;
  text-align: center;
  align-items: center;
  justify-self: center;
  justify-content: center;
  /* margin-left: 500px;
    margin-right: 500px; */
  margin-top: 40px;
  margin-bottom: -20px;
  color: #202340;
}
#parent11 > h5 > span > img {
  width: 30px;
  /* padding-bottom: 10px; */
  margin-bottom: -10px;
}
#parent11 > h5 {
  padding-bottom: 10px;
}
#parent11 > h3 {
  margin-right: 5px;
  color: #595c75;
  font-size: larger;
}
#parent11 > a > button {
  /* border: none; */
  border-radius: 20px;
  padding: 10px;
  margin-left: 10px;
  /* color: #202340; */
  border: 1px soild #202340;
}
#parent11 > a :hover {
  background-color: #202340;
  color: white;
}

/* Part 0 */

#parent10 {
  padding-top: 50px;
  padding-bottom: 20px;
}
#parent10 > a > img {
  width: 100%;
}

/* Part 1 */

#parent {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* gap: 5px; */
  background-color: #f0f1f7;
  /* border: 3px solid red; */
}
#parent > div {
  /* border: 2px solid black; */
  /* margin: 10px; */
  justify-content: space-evenly;
  background-color: white;
  margin: 10px;
  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}
/* DIV 1 */

#div1-1 > div > p {
  margin-bottom: 20px;
}
#div1-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
  background-color: white;
  padding: 15px;
}
#div1-2 > div {
  /* border: 1px solid red; */
  background-color: #f0f1f7;
  justify-content: space-around;
  text-align: center;
  height: 150px;
  /* margin-bottom: -20px; */
}
#div1-2 > div > img {
  /* align-items: center; */
  background-color: #f0f1f7;
  width: 75%;
  height: 70%;
  margin-top: 10px;
}
#div1 a {
  margin-top: 50px;
}
/* hr {
    margin-bottom: -100px;
} */
#div1-2 > div + p {
  text-align: left;
  margin-top: 40px;
}

/* DIV 2 */

#div2-2 {
  text-align: center;
  padding-bottom: 115px;
}
#div2-2 > img {
  align-items: center;
  background-color: #f0f1f7;
  width: 75%;
  height: 70%;
  margin-top: 10px;
}
#div2-2 + p {
  text-align: left;
  margin-top: 70px;
}

/* DIV 3 */

#div3 > div {
  background-color: #f0f1f7;
  margin: 10px;
  text-align: center;
}
#div3 > div > img {
  height: 100%;
  /* margin-bottom: -5px; */
  margin: 6px;
}
#div3 > div + p {
  margin-top: 120px;
}

/* DIV 4 */

#div4-2 > img {
  width: 94%;
  height: 100%;
  padding: 10px;
  margin: 10px, 10px, 0, 10px;
  background-color: #f0f1f7;
}
#div4-1 {
  /* align-items: center; */
  text-align: center;
}
#div4-1 > button {
  padding-left: 120px;
  padding-right: 120px;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-radius: 20px;
  background-color: #414467;
  color: white;
  border: none;
}

/* Part 2 */

#parent1 {
  /* border: 1px solid red; */
  /* background-color: #f1f3f4; */
  padding-top: 50px;
  padding-bottom: 50px;
  display: flex;
  /* height: 300px; */
}
#parent1 > #parent1-1 {
  padding-right: 30px;
}
#parent1-1 > img {
  width: 100%;
  height: 100%;
  /* margin: auto; */
}
#parent1-2 > div > h2 {
  /* border: 1px solid salmon; */
  /* padding: 80px; */
  text-align: center;
  margin-top: -30px;
}
#parent1-2-c1 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
#parent1-2-c1 {
  margin-top: 20px;
}
#parent1-2-c1 > div > img {
  width: 70%;
  /* height: 80px; */
}
#parent1-2-c2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

#parent1-2-c2 > div {
  /* margin: 10px; */
  /* background-color: #f0f1f7; */
  text-align: center;
  justify-content: space-between;
}

#parent1-2-c2 > div > div > img {
  width: 100%;
  /* height: 100px; */
  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}

#parent1 > div {
  width: auto;
}

/* Part 3 */
#logo {
  /* align-items: center; */
  text-align: center;
  margin-top: -60px;
  margin-bottom: -100px;
}
#logo > img {
  /* align-items: center; */
  width: 150px;
  text-align: center;
}

/* Part 4 */
#parent2 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  /* background-color: #f1f3f4; */
  /* margin-right: -20px; */
  border-top: 20px solid #f1f3f4;
  border-bottom: 20px solid #f1f3f4;
  padding-top: 80px;
  width: 100%;
}
#parent2 > div > div > img {
  width: 100%;
  /* justify-content: space-between;  */
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  /* box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px; */
}
#parent2 > div > div > h5 {
  text-align: center;
}
#parent2 > div > div {
  width: 100%;
}
/* Part 5 */

#parent3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* padding-left: 80px; */
  margin-left: 80px;
  gap: 80px;
}
#parent3 > div > img {
  width: 80%;
  /* box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; */
}

/* Part 6 */
#parent4 {
  border-top: 20px solid #f0f1f7;
  border-bottom: 20px solid #f0f1f7;
  margin-top: 20px;
}
#parent4-1 > h2 {
  text-align: center;
  /* border: none; */
}
#parent4-2 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  /* gap: 20px; */
  margin-left: 70px;
  margin-right: 70px;
}
#parent4-2 > div > div > img {
  /* text-align: center; */
  align-items: center;
  border: 10px solid rgb(203 205 212);
  border-radius: 100px;
  /* margin-bottom: 200px; */
  /* padding: 20px; */
  width: 70%;
  margin-top: 20px;
  margin-bottom: -10px;
}

/* Part 7 */

/* Part 8 */

#parent5 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* padding-bottom: 20px; */
  margin-left: 25px;
  margin-right: 25px;
  gap: 30px;
  margin-top: 20px;
  /* margin-bottom: 40px; */
  /* border-bottom: 20px solid #f0f1f7; */
}
#parent5 > div > img {
  width: 100%;
  height: 100%;

  /* box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; */
}
#parent5 > div {
  justify-content: space-evenly;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

/* Part 9 */

#parent6 {
  border-top: 20px solid #f0f1f7;
  border-bottom: 20px solid #f0f1f7;
  margin-top: 20px;
}
#parent4-1 > h2 {
  text-align: center;
  /* border: none; */
}
#parent4-2 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  /* gap: 20px; */
  margin-left: 70px;
  margin-right: 70px;
}
#parent4-2 > div > div > img {
  /* text-align: center; */
  align-items: center;
  border: 10px solid rgb(203 205 212);
  border-radius: 100px;
  /* margin-bottom: 200px; */
  /* padding: 20px; */
  width: 70%;
  margin-top: 20px;
  margin-bottom: -10px;
}
#parent4-2 > div > div {
  /* align-items: center; */
  justify-content: center;
  /* text-align: center;  */
  /* padding-left: 20px;  */
  margin-top: 20px;
}
#parent6 h4 {
  margin-left: 40px;
}

/* Part 10 */

/* part 11 */

/* Part 12 */

#parent5 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* padding-bottom: 20px; */
  margin-left: 25px;
  margin-right: 25px;
  gap: 30px;
  margin-top: 20px;
  /* margin-bottom: 40px; */
  /* border-bottom: 20px solid #f0f1f7; */
  padding-bottom: 20px;
}
#parent5 > div > img {
  width: 100%;
  height: 100%;

  /* box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; */
}
#parent5 > div {
  justify-content: space-evenly;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

/* Part 13 */

/* part 14 */

/* Part 15 */

#parent2 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* gap: 10px; */
  /* background-color: #f1f3f4; */
  /* margin-right: -20px; */
  border-top: 20px solid #f1f3f4;
  border-bottom: 20px solid #f1f3f4;
  padding-top: 80px;
}
#parent2 > div > div > img {
  /* justify-content: space-between;  */
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  /* box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px; */
}
#parent2 > div > div > h5 {
  text-align: center;
}

/* Part 16 */

/* part 17 */

/* Part 18 */

#parent8 > h1 {
  text-align: center;
  /* margin-top: -1px; */
  margin-bottom: 25px;
}

/* Part 19 */

#parent7 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  /* background-color: #f1f3f4; */
  /* margin-right: -20px; */
  /* border-top: 20px solid #f1f3f4; */
  border-bottom: 20px solid #f1f3f4;
  /* padding-top: 40px; */
}
#parent7 > div > div > img {
  width: 100%;
  /* justify-content: space-between;  */
  /* box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; */
  /* box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px; */
}
#parent7 > div > div > h4 {
  text-align: center;
}

/* large screens */
@media all and (max-width: 1250px) {
  #parent9 {
    gap: 450;
  }
  /* part 1 */
  #parent {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }
  /* Part 2 */

  #parent1 {
    display: flex;
  }

  #parent1-2-c1 {
    grid-template-columns: repeat(5, 1fr);
  }
  #parent1-2-c2 {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Part 4 */
  #parent2 {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Part 5 */

  #parent3 {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Part 6 */
  #parent4-2 {
    grid-template-columns: repeat(6, 1fr);
  }

  /* Part 8 */

  #parent5 {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Part 19 */

  #parent7 {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* medium screens */
@media only screen and (min-width: 521px) and (max-width: 920px) {
  #parent9 {
    display: none;
  }
  /* Part 1 */
  #parent {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  /* Part 2 */

  #parent1 {
    flex-wrap: wrap;
  }
  #parent1-2-c1 {
    grid-template-columns: repeat(3, 1fr);
  }
  #parent1-2-c2 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Part 4 */
  #parent2 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Part 5 */

  #parent3 {
    grid-template-columns: repeat(1, 1fr);
  }

  /* Part 6 */
  #parent4-2 {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Part 8 */

  #parent5 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Part 19 */

  #parent7 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* small screens */
@media only screen and (max-width: 520px) {
  #parent9 {
    display: none;
  }
  /* Part 1 */
  #parent {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
  }
  /* Part 2 */

  #parent1 {
    flex-wrap: wrap;
  }
  #parent1-2-c1 {
    grid-template-columns: repeat(2, 1fr);
  }
  #parent1-2-c2 {
    grid-template-columns: repeat(1, 1fr);
  }

  /* Part 4 */
  #parent2 {
    grid-template-columns: repeat(1, 1fr);
  }

  /* Part 5 */

  #parent3 {
    grid-template-columns: repeat(1, 1fr);
  }

  /* Part 6 */
  #parent4-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Part 8 */

  #parent5 {
    grid-template-columns: repeat(1, 1fr);
  }

  /* Part 19 */

  #parent7 {
    grid-template-columns: repeat(1, 1fr);
  }
}