/* Banner */

figure.header-figure {
  background: black;
}

figure.header-figure::after {
  content:'';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: .3;
  background: rgb(0,0,0);
  background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
}

figure.header-figure img {
  opacity: .8;
}

/* Titles */

section.job-info h2,
section.job-info h3,
section.job-info h4 {
  font-family: var(--copy-font);
  font-weight: 500;
  text-transform: none;
}

/* Section job desc */

section.job-info .container {
  display: flex;
  flex-direction: column;
  row-gap: var(--section-padding);
}

article.job-description {
  display: flex;
  flex-direction: column;
  /* row-gap: calc(var(--section-padding) / 2.5 ); */
}

.paragraph {
  padding: 1.28rem 0;
  border-bottom: 1px solid var(--sage-green);
}

.paragraph ul{
  display: flex;
  flex-direction: column;
  row-gap:.8rem;
}
.paragraph ul li {
  display: block;
  position: relative;
  padding-left: 1.2rem;
}

.paragraph ul li::before {
  content:'';
  display: block;
  position: absolute;
  top:7px;
  left: 0;
  background: var(--black);
  width: 4px;
  height: 4px;
  border-radius:4px;
}

.button-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.28rem;
}

.button-group a.btn {
  width: 100%;
  margin-top: 2.8rem;
}

a.simple-link {
  font-size: var(--small-font-size);
  font-family: var(--copy-font);
  letter-spacing: 1px;
  font-weight: 500;
  text-transform: uppercase;
  text-align: center;
  padding-bottom:4px;
  border-bottom: 1px solid;
  text-decoration: none;
  color:var(--dark-green);
}

/* Section Form */

section.form {
  background: var(--olive-green);
}
section.form h2 {
  color:var(--white);
  text-align: center;
  width:100%;
}

main .wpcf7 {
  border:1px solid white;
  padding: calc(var(--section-padding) / 1.2) calc(var(--page-padding) / 1.18);
}
main form{
  display: flex;
  flex-direction: column;
  gap:.88rem;
}
main form>div {
  max-width: 100%;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap:.88rem;
}
main form>div.name select {
  width: 33.33%
}
main form>div.name input {
  width: calc(66.66% - .88rem);
}

main form>div.contact input,
main form>div.information select,
.intl-tel-input.allow-dropdown {
  width:100%;
}

main form>div.information input {
  width:calc(50% - (.88rem / 2));
}

main form>div.message textarea {
  width: 100%;
  height: 120px;
}

main form>div.file {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom:1.28rem;
}

main input[type="file"] {
  display: none;
}

.custom-file-upload {
  display: flex;
  padding: 0.48rem;
  padding-top: 2.88rem;
  cursor: pointer;
  background: transparent;
  width: calc(50% - (0.88rem / 2));
  flex-direction: column;
  font-size: var(--small-font-size);
  text-align: center;
  min-height: 110px;
  border-radius: 3px;
  border: 1px solid white;
  color: white;
  position: relative;
}

.custom-file-upload::before {
  position: absolute;
  content: '';
  display: block;
  top: 12px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 40px;
  height: 28px;
  background: url(/wp-content/uploads/2024/02/upload-file.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.custom-file-upload span {
  font-weight: 200;
  margin-top: 0.28rem;
}

main input[type=text],
main input[type=number],
main input[type=email],
main select,
main textarea {
  padding: .68rem .28rem;
  min-height: 48px;
  font-size: var(--small-font-size);
  color:var(--dark-green);
  opacity: 1;
  font-family: var(--copy-font);
  border:none;
  border-radius:3px;
}

main ::placeholder {
  font-size: var(--small-font-size);
  color:var(--sage-green);
  opacity: 1;
  font-family: var(--copy-font);
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
 opacity: 1 !important;
 margin: 0;
 width: 15px;
 height: 30px;
 background: white;
}

main span.wpcf7-list-item label {
  color:white;
  font-size: var(--small-font-size);
}

main form .btn {
  width: 100%;
}

/* ====================================================================== Responsive ====================================================================== */

@media screen and (max-width:990px){

  .paragraph {
    transition: all 200ms ease-in-out;
  }
  .paragraph h2{
    position: relative;
  }
  .paragraph h2::after {
    content:'';
    display: block;
    position: absolute;
    right: 0;
    top:50%;
    width: 6px;
    height: 6px;
    border-bottom: 1px solid var(--olive-green);
    border-right: 1px solid var(--olive-green);
    transform:translateY(-50%) rotate(45deg);
  }
  .paragraph.active h2::after{
    transform:translateY(-50%) rotate(-136deg);
  }
  .paragraph:not(.active) h2 {
    margin:0;
  }
  .paragraph:not(.active) *:not(h2, h3, h4) {
    display: none;
  }

  /* Details list */
  aside.job-details ul {
    display: flex;
    flex-direction:column;
  }
  aside.job-details ul li {
    display: flex;
    align-items: center;
    column-gap: 1rem;
    padding: 1.28rem 0;
    width: 100%;
    font-weight: 600;
    color:var(--dark-green);
    border-bottom:1px solid var(--sage-green);
  }

  aside.job-details ul li:first-of-type {
    border-top:1px solid var(--sage-green);
  }

  aside.job-details ul li i {
    display: flex;
    width: 42px;
    height: 42px;
    padding: 8px;
    background: var(--olive-green);
    border-radius:2px;
    align-items: center;
    justify-content: center;
  }

  aside.job-details ul li i svg {
    fill:white;
    max-width: 100%;
    max-height: 100%;
  }
}

@media screen and (min-width:991px){
  section.job-info{
    position: relative;
  }
  /* section.job-info::after {
    content:'';
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    background: var(--beige);
    width: var(--boxed);
    height: 1px;
  } */
  section.job-info .container {
    flex-direction: row;
    justify-content: space-between;
  }
  article.job-description {
    width: 60%;
    padding-right: 10%;
    row-gap: calc(var(--section-padding) / 2);
  }
  aside.job-details {
    width: 40%;
  }
  section.job-info h2, section.job-info h3, section.job-info h4{
    margin-bottom: calc(var(--section-padding) / 2.8);
  }
  .paragraph {
    padding:0;
    border:0;
  }
  aside.job-details ul {
    display: flex;
    flex-direction: column;
  }
  aside.job-details ul li {
    padding: .88rem 0;
    border-bottom:1px solid var(--beige);
    display: flex;
    gap:1rem;
    font-weight: 600;
    font-size: var(--small-font-size);
    align-items: center;
  }
  aside.job-details ul li:first-of-type{
    border-top:1px solid var(--beige);
  }
  aside.job-details ul li i {
    display: flex;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    align-items: center;
    justify-content: center;
  }
  aside.job-details ul li i svg {
    fill:var(--olive-green);
    max-width: 100%;
    max-height: 100%;
  }

  main .wpcf7 {
    padding: calc(var(--section-padding) / 2.8) calc(var(--section-padding) / 2);
  }

}


@media screen and (min-width:1200px){
  section.header-banner {
    height: 55vh;
  }
  article.job-description {
    width: 66%;
  }
  aside.job-details {
    width: 33%;
  }

  /* Form */
  main .wpcf7 {
    padding: calc(var(--section-padding) / 1.2);
  }
  main form {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  main form>div {
    width: 100%;
  }
  main form>div.contact > *,
  main form>div.information select,
  main form span.wpcf7-acceptance {
    max-width:calc(50% - (.88rem / 2));
  }
  main form>div.information input,
  main form>div.name select {
    width: calc(25% - .88rem);
  }
  main form>div.name input {
    width: calc(75% - .88rem);
  }
  main form>div.file {
    margin-bottom: 2.28rem;
  }
  main form span.wpcf7-acceptance {
    display: flex;
    align-items: center;
  }
  main form .btn {
    width: auto;
    margin-top: 0;
  }
  main input[type=text],
  main input[type=number],
  main input[type=email],
  main select,
  main textarea{
    padding: .88rem .68rem;
  }
}