/* HERO SECTION */

.hero-section,
.cta-section-home,
.how-it-works-section {
  padding: 30px 15px;

  background-color: #f2f2f2;

  width: 100%;
}

.hero-section {
  background: linear-gradient(180deg, #8b3993, #dfb6e2);
}

.hero-section h1,
.hero-section p {
  text-align: center;
}

.hero-section h1 {
  font-size: 2em;

  margin-top: 20px;

  margin-bottom: 15px;

  color: #0066cc;

  color: #3498db;
}

.search-tuitions-div {
  margin: 40px auto;

  text-align: center;

  border: none;

  padding: 30px 15px 30px;

  width: 95%;

  border-radius: 15px;

  background-color: white;

  overflow: hidden;

  background: none;
}

.search-tuitions-div h2 {
  color: white;
}

.search-form-div {
  width: 90%;

  display: inline-flex;

  margin: 25px auto;

  border: 3px solid #f2f2f2;

  border-radius: 10px;

  overflow: hidden;

  background-color: white;
}

.form-select-group {
  width: 30%;

  display: inline-flex;

  flex-wrap: nowrap;

  overflow: hidden;
}

.form-select-group select,
.form-select-group div {
  width: 50%;

  padding: 10px;

  border: none;

  border-right: 3px solid #f2f2f2;

  background-color: white;

  font-size: 16px;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.form-input-group {
  width: 70%;

  display: inline-flex;
}

.form-input-group input[type="text"] {
  width: 80%;

  padding: 10px;

  border: none;

  padding-left: 15px;

  font-size: 16px;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.form-input-group input[type="text"]::placeholder {
  color: #b3b3b3;
}

.form-input-group button {
  width: 20%;

  padding: 10px;

  border: none;

  background-color: #f60;

  color: white;

  cursor: pointer;

  font-size: 16px;

  border-radius: 5px;
}

.form-input-group button:hover {
  background-color: #e65c00;
}

:focus {
  outline: 0;
}

/* CALL TO ACTION SECTION */

.cta-section-home {
  background-color: white;
}

.cta-flex-group {
  width: 80%;

  display: flex;

  border: 7px solid white;

  width: 95%;

  box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px,
    rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;

  background-color: #f2f2f2;

  margin: 0 auto;

  border-radius: 10px;

  overflow: hidden;
}

.cta-flex {
  width: 50%;

  padding: 20px;

  text-align: center;
}

.cta-flex:nth-child(2) {
  border-left: 2px solid white;
}

.cta-flex img {
  max-width: 100%;
}

.cta-flex a, .upgrade-link {
  background-color: #f60;

  color: white;

  padding: 5px 15px;

  display: inline-block;

  border-radius: 5px;

  margin-top: 20px;

  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.cta-flex a:hover {
  background-color: #e65c00;
}

.cta-flex p {
  margin: 20px 10px;
}

/* HOW IT WORKS SECTION */

.how-it-works-section {
  background-color: white;
}

.how-it-works-section h2 {
  text-align: center;

  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;

  max-width: 220px;

  padding: 10px;

  border-radius: 5px;

  border: 2px solid #ccc;

  margin: 0 auto 20px;
}

.hiw-flex-group {
  box-shadow: none;
}

.hiw-flex {
  background-color: white;
}

.hiw-flex h3 {
  text-align: left;
}

.step-count span {
  border: 2px solid #f60;

  width: 40px;

  height: 40px;

  display: block;

  border-radius: 50%;
}

.step-no {
  border: none;

  color: #f60;

  font-weight: bold;

  font-size: 20px;
}

.step-text {
  padding: 15px;

  font-size: 14px;

  text-align: left;
}

.users-say-section table {
  font-style: italic;
}

.users-say-section .fa {
  font-size: 12px;

  color: grey;
}

.cta-flex table img {
  max-width: 120px;

  display: block;

  margin: 20px;

  border-radius: 50%;

  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}

.testimonials {
  width: 100%;
}

.testimonials ul {
  display: flex;

  flex-wrap: wrap;

  width: 100%;

  padding-left: 0;
}

.testimonials li {
  width: 45%;

  margin: 15px auto;

  padding: 15px 15px 25px;

  border-radius: 10px;

  overflow: hidden;

  box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px,
    rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;

  color: grey;
}

.testimonials li:hover {
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}

.testimonials img {
  width: 120px;

  height: 120px;

  display: block;

  margin: 20px auto;

  border-radius: 50%;

  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}

footer {
  background-color: #f2f2f2;

  color: black;
}

.links-board-div {
  background-color: white;

  color: grey;

  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}

.links-board-div a {
  color: grey;
}

h1 {
  font-weight: 700;
  line-height: 1.5;
}

.step-no {
  text-align: center;
}

.hero-section h1,
.hero-section p {
  color: #f7edf8 !important;
}

.search-tuitions-div h2 {
  color: #ffd700;
}

.search-tuitions-div {
  border-color: #e0f7fa;
}

.fixed-link-bar {
  display: none;
}

.upgrade-heading {
  width:500px;
  max-width:70% !important;
  font-weight: 500;
}

.upgrade-link {
  display: block;
  background: #f60;
  color: white;
  width: 150px;
  padding: 10px;
  margin: 30px auto 10px;
  text-align: center;
}

.cta-user-role .cta-flex {
  margin: auto;
  border: none;
}

@media only screen and (max-width: 600px) {
  /* HERO SECTION */

  .search-tuitions-div {
    width: 100%;
  }

  .search-tuitions-div h2 {
    font-size: 18px;
  }

  .search-form-div {
    display: block;

    width: 100%;
  }

  .form-select-group,
  .form-input-group {
    width: 100%;

    border-top-left-radius: 5px;
  }

  .form-input-group {
    display: block;
  }

  .form-select-group select:nth-child(2) {
    border: none;
  }

  .form-input-group input[type="text"],
  .form-input-group button {
    width: 100%;

    border-top: 3px solid #f2f2f2;

    font-size: 15px;
  }

  .form-input-group button {
    border-radius: 10px;
  }

  /* CTA SECTION */

  .cta-flex-group {
    display: block;

    width: 100%;
  }

  .cta-flex {
    width: 100%;
  }

  .cta-flex:nth-child(2) {
    border-left: none;

    border-top: 2px solid white;
  }

  .cta-flex table img {
    max-width: 80px;

    display: block;

    margin: 20px 0;

    border-radius: 50%;

    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
  }

  .testimonials li {
    width: 100%;

    margin: 15px auto;
  }

  .testimonials img {
    width: 80px;

    height: 80px;
  }

  .hero-section {
    padding: 15px;
  }

  .hero-section h1 {
    font-size: 18px;
    color: #e0f7fa;
  }

  .hero-section p {
    font-size: 14px;
    color: #e0f7fa !important;
  }

  .search-tuitions-div {
    margin: 15px auto;
    padding: 15px;
    border-color: #e0f7fa;
  }

  .search-form-div {
    margin: 15px 0 10px;
  }

  .search-tuitions-div h2 {
    font-size: 14px;
    font-weight: 600;
    color: #ffd700;
  }

  .cta-section-home {
    padding: 15px;
  }

  .cta-flex-group {
    border: 3px solid white;
  }

  .cta-flex h2 {
    font-size: 16px;
    font-weight: 700;
  }

  .cta-flex p {
    font-size: 14px;
    margin: 15px 10px;
  }

  .cta-flex table {
    border-collapse: collapse;
  }

  .cta-flex td {
    border-bottom: 1px solid #f2f2f2;
  }

  .fixed-link-bar {
    position: fixed;
    background-color: white;
    width: 100%;
    padding: 15px;
    bottom: 0;
    z-index: 1;
    background-color: #a3d5ff;
    border-radius: 10px 10px 0 0;
  }

  .fixed-link-bar a {
    width: 70% !important;
    padding: 10px;
    border: none;
    background-color: #007bff;
    color: white;
    cursor: pointer;
    font-size: 16px;
    border-radius: 5px;
    display: block;
    text-align: center;
    margin: 0 auto;
  }

  .how-it-works-section h2 {
    font-size: 16px;
    max-width: 170px;
    margin: 0 auto 10px;
  }
}