/* Career Page styles */
.career-header {
  width: 100%;
  position: absolute;
  top:0;
  height: 80px;
  padding: 10px 5vw;
  z-index: 9999;
}

.career-header nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: auto;
}

.career-header .logo {
  width:250px;
  height: auto;
}

.career-header .menu-items {
  display: flex;
  justify-content: flex-end;
  gap: 20px;
}

.career-header .menu-link {
  font-size: 17px;
  color:#111;
  text-align: center;
  text-decoration: none;
  font-family: 'Avenir 07';
  
}

.career-header .menu-link:hover {
  color:#e51c25;
  cursor: pointer;
}

.career-header .submenu a {
  display: none;
  position: absolute;
  margin-top:10px;

}

.career-header .submenu:hover a {
  display: block;
}

#careers .intro-section {
  background-image: url('../images/career-bg.png');
  min-height: 100vh;
  width: 100%;
  background-position: bottom center;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}

.intro-section .intro-content {
  width: 700px;
  max-width:100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

.intro-content h1 {
  text-transform: uppercase;
  line-height: 1.2;
  color:#000;
}

#careers p {
  font-size: 20px;
  line-height: 1.4;
  margin-bottom:30px;
}

.btn {
  background-color: #e51c25;
  border-radius: 30px;
  font-weight: bold;
  font-size: 18px;
  text-decoration: none;
  color:#fff;
  min-width: 300px;
  padding:20px 40px;
}

.careerpage-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content:center;
  text-align: center;
  padding: 5vh 10vw;
}

.careerpage-section .narrow-block {
  width: 800px;
  max-width: 100%;
}

.careerpage-section .title {
  text-transform: uppercase;
  font-size: 45px;
  font-family: 'Avenir 03';
  margin-bottom:20px;
  color: #000;
  
}

.careerpage-section .title2 {
  font-size: 45px;
  font-family: 'Avenir 03';
  margin-bottom: 10px;

}

.careerpage-section h4 {
  font: 40px;
  font-family: 'Avenir 07';
  margin-bottom: 30px;
  font-weight: bold;
}

.gallery-section {
  padding: 5vh 5vw;
}

.gallery-wrapper {
  display: flex;
  gap: 20px;
}

.gallery-wrapper .img1 {
  flex-basis: 70%;

}
.gallery-wrapper .img2 {
  flex-basis: 30%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  
}

.gallery-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}



.infobox-container {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.infobox {
  flex-basis: 25%;
  background-color: #FEF0F1;
  border-radius: 30px;
  padding: 30px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.infobox img {
  width: 50px;
  margin-bottom: 20px;
}

.infobox p {
  font-size: 18px !important;
  line-height: 1;
  font-weight: bold;
}


.rexup-academy {
  background-color: #f5f5f5;
  padding: 15vh 10vw 0 10vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-top: 50px;
}

.rexup-academy h3 {
  text-transform: uppercase;
  font-size: 26px;
  margin-bottom: 20px;
}

.rexup-academy .btn {
  
  font-size: 20px !important;

}
#open-roles {
  background-color: #f5f5f5;
}
#open-roles p {
  width: 700px;
  max-width: 100%;
}
.btn-primary, .btn-secondary:hover {
  background-color: #111;
}

.btn-primary:hover, .btn-secondary {
  background-color: #e51c25;
}


.pageheader {
  background-image: url('../images/rexup-academy-bg.jpg');
  height: 60vh;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: cover;
  background-position: center center;
  color: #fff;
}

.header-background {
    background-color: #FEF0F1;
}

.nav-phone-wrapper {
    display: none;
}


.career-details {
  padding: 8vh 15vw;
}

.career-details p {
  margin-bottom: 30px;
}

.career-details li {
  margin-bottom: 10px;
}
.career-details p,
.career-details li {
  font-size: 18px;
  line-height: 1.5;
}

.application-body {
  background-color: #f6f6f6;
  padding: 5vh 15vw;
}

.w-col {
  padding: 15px;
}
.w-input, .w-select {
  margin-top: 10px;
}

.text-field, .select-field, .custom-file-input {
  height: 50px;
}

.custom-file-input {
  background-color: #6D6E71;
  color: #fff;
}

.disclaimer {
  background-color: #D4D5D6;
  padding: 4vh 10vw;
}

.disclaimer h4 {
  font-family: 'Avenir 03';
  margin-bottom: 10px;
}

.text-field::placeholder {
  color: #858585;
  font-weight: 400;
}


/* Responsive styles */

@media (min-width:500px) and (max-width:769px) {
  .gallery-wrapper .img1, .gallery-wrapper .img2 {
      flex-basis: 50%;
  }
  .img1 img {
    object-position: right;
  }
  .infobox-container {
    flex-wrap: wrap;
  }

  .infobox {
    flex-basis: 48%;
  }
}

@media (max-width:500px) {
  .intro-content {
    padding-left: 10vw;
    padding-right: 10vw;
  }
  .gallery-wrapper {
    flex-direction: column;
  }
  .infobox-container {
    flex-direction: column;
  }

  h2, h4 {
    text-align: left;
    line-height: 1.2;
  }

  .careerpage-section p {
    text-align: left;
  }

  .careerpage-section {
    align-items: flex-start;
  }
  .infobox p {
    text-align: center;
  }

  .btn-large {
    line-height: 1;
  }

  .career-details, .application-body {
    padding: 5vh 10vw;
  }
   

  .disclaimer p {
    font-size: 15px;
    line-height: 1.4;
  }
}