.main-page-header {
  z-index: 999;
}




.getOffer {
  background-color: #058dd0;
  border: 1px solid #058dd0;
}
.getOffer:hover {
  background-color: #058dd0;
  opacity: 0.8;
}
.knowledge-container {
  background-color: #f3d178;
  top: 200px;
  left: -70px;
  border-radius: 0px 0px 10px 10px;
  opacity: 1;
  z-index: 98;
  position: fixed;
  transform: rotate(270deg);
  width: fit-content;
  height: fit-content;
  padding: 0.5rem;
}
.knowledge {
  text-decoration: none;
}
.whatsapp-container {
  background-color: #efefef;
  top: 320px;
  border-radius: 0px 0px 10px 10px;
  opacity: 1;
  z-index: 98;
  position: fixed;
  transform: rotate(270deg);
  width: fit-content;
  height: fit-content;
  padding: 0.5rem;
}
.content {
  height: fit-content;
}
#background-video {
  position: absolute;
  width: 100%;
  z-index: -1;
  background-image: url("./assets/video@2x.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.mobile_background_image {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.first-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 5vw;
  text-shadow: 0px 0px 10px #0000004d;
}

.second-title {
  text-shadow: 0px 0px 10px #0000004d;
}
.card-wrapper {
  display: flex;
  justify-content: center;
}
.upcoming-card-title {
  min-height: 7vh;
}
.card-title-container {
  min-height: 80px;
}
.hat-image {
  width: 15%;
}
.carousel-control-prev,
.carousel-control-next {
  top: 108%;
  width: 90%;
}
.carousel-dark .carousel-indicators [data-bs-target] {
  background-color: #058dd0;
}
.carousel-indicators {
  margin-bottom: -1rem !important;
}
.students-logo-wrapper {
  width: 15%;
}
.list-unstyled a {
  color: #495057;
  text-decoration: none;
}
/* to work dropdown menu when mouse hover it. */
/* the execute larger screen from 992px */
@media (min-width: 992px) {
  .dropdown:hover > .dropdown-menu {
    display: block;
  }

  .dropdown > .dropdown-toggle:active {
    /*Without this, clicking will make it sticky*/
    pointer-events: none;
  }
}
@media screen and (max-width: 768px) {
  .carousel-control-prev,
  .carousel-control-next {
    top: 110%;
    width: 75%;
  }
  .carousel-indicators {
    margin-bottom: -2rem !important;
  }
  .education-card-row {
    display: flex;
    flex-wrap: nowrap !important;
    overflow-x: auto;
  }
}
@media screen and (max-width: 576px) {
  .hat-image {
    width: 20%;
  }
  .steps-image {
    width: 85% !important;
  }
  .students-logo-wrapper {
    width: 100%;
  }