body {
  box-sizing: border-box;
  padding: 0px;
}

.navbar {
  background-color: rgb(255, 255, 255);
  /* font-family: Oswald, serif; */
  /* box-shadow: 1px 1px 10px 3px rgba(188, 188, 188, 0.249);*/
}

.navbar-brand {
  margin: 10px;
}

.navbar-right-ele {
  text-transform: uppercase;
  font-weight: 600;
  color: rgb(0, 0, 0);
  margin-left: 26px;
  letter-spacing: 1px;
}

.navbar-nav {
  margin: 10px 20px;
}


.row {
  display: flex;
  flex-wrap: wrap;
}

#section h1 {
  color: #fff;
  font-family: oswald, serif;
  text-transform: uppercase;
  font-weight: 700;
}

#section a {
  border-radius: 0%;
  text-transform: capitalize;
  font-family: Poppins, serif;
}

.staff:hover {
  border: 2px solid #fff;
  color: #fff;
  transform: scale(1.05);
  transition: 0.2s;
}

.candidate:hover {
  color: #fff;
  background-color: rgb(245, 20, 4);
  transform: scale(1.05);
  transition: 0.2s;
}

.candidate {
  background-color: rgb(245, 20, 4);
  color: #fff;
}

.staff {
  border: 2px solid #fff;
  color: #fff;
}

@media (min-width: 856px) {
  #online {
    font-size: 50px;
  }

  #experience {
    font-size: 80px;
  }

  .staff {
    font-family: Poppins, serif;
    font-size: 18px;
    padding: 15px 50px;
  }

  .candidate {
    font-family: Poppins, serif;
    font-size: 18px;
    padding: 15px 50px;
  }
}

/* Add a media query for smaller screens (e.g., mobile devices) */
@media (max-width: 767px) {
  #section {
    max-width: 100%;
    height: 80vh;
  }

  .col-lg-6 {
    width: 100%;
    /* Make the columns full width on smaller screens */
    order: unset;
    /* Reset the order property */
    text-align: center;
    /* Center align text in smaller screens */
  }
}

.staff:hover {
  border: 2px solid #fff;
  color: #fff;
  transform: scale(1.05);
  transition: 0.2s;
}

.candidate:hover {
  color: #fff;
  background-color: rgb(245, 20, 4);
  transform: scale(1.05);
  transition: 0.2s;
}

.candidate {
  background-color: rgb(245, 20, 4);
  color: #fff;
}

.staff {
  border: 2px solid #fff;
  color: #fff;
}

@media (min-width: 856px) {
  #online {
    font-size: 50px;
  }

  #experience {
    font-size: 80px;
  }

  .staff {
    font-family: Poppins, serif;
    font-size: 18px;
    padding: 15px 50px;
  }

  .candidate {
    font-family: Poppins, serif;
    font-size: 18px;
    padding: 15px 50px;
  }
}

@media (max-width: 956px) {
  .navbar-nav a {
    color: black !important;
  }
}



.card-div {
  width: 87%;
}

.card-header {
  background-color: transparent;
  border: none !important;
}

.card-header h6 {
  font-family: Oswald, serif;
  padding-top: 15px;
  font-size: 19px;
  font-weight: 700;
}

.google_sign_in {
  border: 2px solid rgba(161, 160, 160, 0.458);
  text-align: center;
  padding: 9px;
}

.google_sign_in a {
  color: rgba(87, 87, 87, 0.725);
  font-weight: 500;
}

.form-group {
  padding: 4px;
  border: 2px solid rgba(161, 160, 160, 0.458);
}

.form-group input {
  border: none;
  outline: none;
  padding: 6px;
}

.login-div {
  background-color: rgb(255, 47, 0);
  color: white;
  border: none;
  margin: 30px 0px 0px 0px;
}

.login-div button {
  color: white;
  box-shadow: none;
  text-transform: capitalize !important;
  font-size: 14px;
}

.login-div:hover {
  transform: scale(1.02);
  transition: 0.2s;
  color: white;
}

.login-div button:hover {
  transform: scale(1.02);
  transition: 0.2s;
  color: white;
  box-shadow: none !important;
}

.card-footer {
  background-color: transparent;
  font-weight: 500;
  font-size: 14px;
  border: none !important;
}

.line1 {
  width: 60%;
  position: absolute;
}

.highlight a {
  color: rgb(255, 47, 0);
}