@font-face {
  font-family: "MavenProRegular";
  font-style: normal;
  font-weight: 400;
  src: url("/assets/font/MavenPro-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "MavenProMedium";
  font-style: normal;
  font-weight: 500;
  src: url("/assets/font/MavenPro-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "MavenProSemiBold";
  font-style: normal;
  font-weight: 600;
  src: url("/assets/font/MavenPro-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "MavenProBold";
  font-style: normal;
  font-weight: 700;
  src: url("/assets/font/MavenPro-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "MavenProExtraBold";
  font-style: normal;
  font-weight: 800;
  src: url("/assets/font/MavenPro-ExtraBold.woff2") format("woff2");
}
@font-face {
  font-family: "MavenProBlack";
  font-style: normal;
  font-weight: 900;
  src: url("/assets/font/MavenPro-Black.woff2") format("woff2");
}
.jobs {
  display: flex;
  flex-direction: column;
  margin: 40px auto 100px auto;
  font-size: 17px;
  gap: 8px;
}

summary {
  display: flex;
  justify-content: space-between;
  border-radius: 0 0 40px 0;
  background: #0046B4 url("/assets/svg/plus.svg") center right 20px/20px no-repeat;
  padding: 25px 40px 25px 20px;
  color: #FFFFFF;
  font-family: "MavenProMedium";
  list-style: none;
}
summary::-webkit-details-marker {
  display: none;
}
summary:hover {
  cursor: pointer;
}

.job {
  color: #3E3E40;
  line-height: 1.5;
  font-size: 17px;
}
.job[open] summary {
  background: #00AFF4 url("/assets/svg/minus.svg") center right 20px/20px no-repeat;
}
.job h3 {
  color: #3E3E40;
  font-size: 20px;
  font-style: normal;
  font-family: "MavenProRegular";
  line-height: 1.5;
}
.job__link {
  display: block;
  padding: 20px;
  margin: 30px 0;
  background: #00AFF4;
  color: #FFFFFF;
  text-align: center;
  border-radius: 0 0 40px 0;
}
.job__link:hover, .job__link:focus {
  cursor: pointer;
  color: #FFFFFF;
}
@media screen and (min-width: 992px) {
  .jobs {
    padding: 0;
  }
  .job__link {
    max-width: 185px;
  }
}
@media screen and (min-width: 1200px) {
  .container {
    max-width: 750px;
  }
}