* {
  margin: 0;
  padding: 0;
}
body {
  font-family: "rubik", serif;
  font-size: medium;
}
.header,
.footer {
  font-family: "Rubik", sans-serif !important;
  text-shadow: none !important;
  font-weight: bolder !important;
  font-size: 20px;
}
.container {
  max-width: 600px !important;
  padding: 20px;
  border-radius: 20px;
  text-shadow: none;
  font-size: 20px;
  background-color: #90e0ef !important;
}
.container .about {
  background-color: #ade8f4 !important;
  border-radius: 20px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.middel {
  margin-left: auto;
  margin-right: auto;
}

.container p {
  font-family: "Rubik", sans-serif;
  width: 90%;
  font-size: 22px !important;
  margin-top: 20px;
  text-align: justify;
}

.info {
  max-width: 600px !important;
  padding: 20px;
  border-radius: 20px;
  text-shadow: none;
  font-size: 20px;
  font-family: "Miriam Libre", sans-serif;
  margin-left: auto;
  margin-right: auto;
  background-color: #ade8f4 !important;
}

.container h1,
h2 {
  font-family: "Assistant", serif;
  font-size: 32px !important;
  font-weight: 600 !important;
}

.container small {
  font-size: 18px;
}

.container span {
  font-family: "Miriam Libre", sans-serif;
  font-size: 18px;
}
.navhome {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  text-shadow: none;
  width: 90%;
}

.navhome a {
  font-family: "Miriam Libre", sans-serif;
  text-shadow: none !important;
  font-size: 20px !important;
  color: #fff !important;
  border-radius: 20px !important;
  outline: none !important;
}

.qcontainer {
  max-width: 600px;
  margin-top: 15px;
  background-color: #caf0f8;
  padding: 20px;
  border-radius: 20px;
  text-shadow: none;
  margin-left: auto;
  margin-right: auto;
}

.qcontainer .qpareet {
  font-family: "Assistant", sans-serif;
  font-size: 24px;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  color: #023e8a;
  text-shadow: none;
}

.qcontainer .numquetions {
  font-size: 48px;
  font-family: "Agbalumo";
}

.sheala {
  font-family: "rubik", sans-serif !important;
  font-size: 25px;
  width: 100%;
  color: #0077b6;
  margin-left: auto;
  margin-right: auto;
  text-shadow: none;
  background-color: #ddd;
  padding: 10px 20px;
  border-radius: 20px;
}

.modgash {
  font-family: "Assistant", serif !important;
  font-weight: bolder;
  font-size: 27px;
  color: #03045e;
}

.tshova {
  width: 40%;
  margin-right: auto;
  margin-left: auto;
}

.tshova span {
  margin-right: -15px;
}

.flexdiv {
  display: flex;
  align-items: center;
}
.tshotext {
  font-size: 22px !important;
  color: #0765e1 !important;
  font-family: "Assistant";
  text-align: center !important;
  font-weight: 600;
  background-color: #eee !important;
  text-shadow: none !important;
}

.tshova1 {
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}
.bdok {
  background-color: #0077b6 !important;
  color: #fff !important;
  text-shadow: none !important;
  font-size: 22px;
  font-family: "Assistant", sans-serif;
  border-radius: 20px !important;
}
.bdok:hover {
  background-color: #023e8a !important;
}

.seefeedback {
  background-color: #03045e !important;
}

.shealaba {
  margin-top: 20px;
}

.shoresh label {
  text-shadow: none !important;
  font-size: 20px !important;
  font-family: "Assistant", sans-serif;
  padding: 10px 35px;
}

.shoresh .bt1 {
  background-color: #21b0fe !important;
  color: #000 !important;
}

.shoresh .bt2 {
  background-color: #fed700 !important;
  color: #000 !important;
}

.shoresh .bt3 {
  background-color: #fe218b !important;
  color: #000 !important;
}

.shoresh .bt4 {
  background-color: #90e0ef !important;
  color: #000 !important;
}

.shoresh .bt5 {
  background-color: #06d6a0 !important;
  color: #000 !important;
}

.shoresh .bt6 {
  background-color: #ffd166 !important;
  color: #000 !important;
}

.shoresh .bt7 {
  background-color: #ef476f !important;
  color: #000 !important;
}

.shealaba .headshoresh {
  text-align: center;
  font-size: 25px;
  font-family: "Assistant";
  font-weight: 600 !important;
  color: #03045e;
}
.shealaba p {
  margin-left: auto;
  margin-right: auto;
  font-size: 20px;
  color: #0077b6;
}

.shealaba p {
  margin-left: auto;
  margin-right: auto;
  font-size: 20px;
  color: #0077b6;
}

.shealaba .modgash {
  font-family: "Assistant", serif !important;
  font-weight: bolder;
  font-size: 24px;
  color: #03045e;
}

.shealaba .sheala {
  font-size: 18px !important;
  color: #03045e;
}

.shealaba h3 {
  text-align: center;
  font-size: 28px;
  font-family: "Assistant";
  font-weight: 600 !important;
}

.shealaba .shoresh {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.shealaba .shoresh div {
  margin: 5px;
  width: 180px;
}

.navApp {
  width: 600px;
  margin-left: auto !important;
  margin-right: auto !important;
  display: flex;
  justify-content: space-evenly;
  margin-top: 20px;
  align-content: center;
  background-color: #fed700;
  padding: 10px 0px;
  border-radius: 20px;
}
.navApp a {
  font-size: 20px !important;
  font-family: "Rubik";
  text-shadow: none !important;
}

.navApp i {
  font-size: 40px !important;
  text-align: center;
  color: #03045e;
}

.navApp i:hover {
  color: #0077b6;
}

/* -------------------------------- for mopile -------------------------- */

@media screen and (max-width: 600px) {
  body {
    font-family: "rubik", serif;
    font-size: small;
  }
  .header,
  .footer {
    font-size: 16px;
  }
  .container {
    padding: 10px;
    border-radius: 10px !important;
    font-size: 18px;
  }
  .container .about {
    border-radius: 10px;
  }

  .container p {
    font-family: "Rubik", sans-serif;
    width: 90%;
    font-size: 18px !important;
    margin-top: 10px;
  }

  .info {
    padding: 10px;
    border-radius: 10px;
    font-size: 15px;
  }

  .container h1,
  h2 {
    font-size: 24px !important;
  }

  .container small {
    font-size: 14px;
  }

  .container span {
    font-size: 14px;
  }

  .navhome a {
    font-size: 18px !important;
    border-radius: 10px !important;
  }

  .qcontainer {
    padding: 10px;
    border-radius: 10px;
  }

  .qcontainer .qpareet {
    font-size: 20px;
    width: 90%;
    line-height: 120%;
  }

  .qcontainer .numquetions {
    font-size: 30px;
  }

  .sheala {
    font-family: "rubik", sans-serif !important;
    font-size: 20px;
    padding: 10px 10px;
    border-radius: 10px;
  }

  .modgash {
    font-size: 22px;
  }

  .tshotext {
    font-size: 18px !important;
  }

  .shoresh label {
    font-size: 18px !important;
  }

  .shealaba p {
    font-size: 18px;
    line-height: 140%;
  }

  .shealaba .modgash {
    font-size: 20px;
  }

  .shealaba .sheala {
    font-size: 16px !important;
  }

  .shealaba h3 {
    font-size: 24px;
  }

  .shealaba .shoresh div {
    margin: 5px;
    width: 150px !important;
  }

  .navApp {
    border-radius: 10px;
  }
  .navApp a {
    font-size: 20px !important;
  }

  .navApp i {
    font-size: 30px !important;
  }
}