@media screen and (max-width: 991px){
  .career-cards-block {
    /* background-position: 50% -10% !important;
    background-size: 200% !important; */
  & .hero-card,
  & .overlay,
  & .inverted {
    max-height: none !important;
    height: 100% !important;
  }
  & .hero-card:nth-child(3n + 3) {
    margin-top: 0px !important;
  }
  & .hero-card:hover, .masked-bg:hover {
    transform: rotate(2deg) !important;
  }
  & img.headshot {
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    mask-image: url('/wp-content/uploads/2025/04/Vector-01.png');
    mask-repeat: no-repeat;
    mask-position: 20px 45%;
    mask-size: 300% !important;
    clip-path: none;
  }
  & .hero-card:hover img.headshot {
    mask-size: 300%;
    mask-position: 50% 50% !important;
  }
  & .hero-card:hover .inverted {
    background: linear-gradient(0deg,rgba(6, 36, 67, 0.7) 0%,rgba(6, 36, 67, 0.7) 100%) !important;
  }
  & .related .hero-card {
    opacity: 1;
    transform: none;
}
& .post-modal {
  z-index: 99999 !important;
}
& .card-info h3 {
  font-size: 36px !important;
}
& .card-info p {
  font-size: 16px !important;
}
& .overlay {
  width: 100% !important;
}
& .hero-card,
& .overlay,
& .inverted {
  height: 400px !important;
}
& .modal-content a {
  padding: 20px !important;
}
& .modal-content .card-info {
  margin: -60px auto 40px auto !important;
}
& .modal-content img:not(.benefit img) {
  height: 300px;
  object-fit: cover;
}
}
}

@media screen and (max-width: 768px){
  .career-cards-block{
      & .slider-cards {
      grid-template-columns: 1fr !important;
      padding-bottom: 120px !important;
    }
    & .hero-card:not(:has(.inverted)),  & .hero-card:not(:has(.overlay)), .inverted, .overlay {
      padding: 20px !important;
    }
    & .hero-card:has(.inverted),  & .hero-card:has(.overlay) {
      padding: 0px !important;
    }
    & .modal-content {
      width: 95%;
      margin: 10% auto;
    }
  }
}
.career-cards-block {
& .hero-card:not(:has(.inverted)),
& .hero-card:not(:has(.overlay)) {
border-radius: 10px;
width: 100%;
height: 640px;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 40px;
background-size: cover;
background-position: center;
}
& .hero-card:has(.inverted),
& .hero-card:has(.overlay) {
border-radius: 10px;
padding: 0px;
background-size: cover;
background-position: center;
}
& .inverted,
& .overlay {
width: 100%;
height: 640px;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 40px;
border-radius: 10px;
transition: all 0.3s ease-in-out;
}
& .hero-card {
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.25);
max-height: 50vw;
}
& .slider-cards {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
justify-content: center;
margin: 0 auto;
max-width: 1400px;
padding-bottom: 280px;
padding-left: 20px;
padding-right: 20px;
}
}
@media screen and (min-width:1281px){
  .career-cards-block {
  & .slider-cards:not(.related .slider-cards) > *:not(.post-modal):nth-child(3n + 3),  & .related .slider-cards > *:nth-child(3n + 2) {
margin-top: -60px;
}
&.related .slider-cards > *:nth-child(3n + 3):not(.post-modal) {
margin-top: 0px;
}
}
}
.career-cards-block {
/* background-color: #eaeaed;
background-image: url("/wp-content/uploads/2025/04/8fba85e573806864ce9d603c9adc1540.png");
background-size: contain;
background-position: 150% -20%;
background-repeat: no-repeat; */
  & .hero-card,
  & .inverted {
transition: all 0.3s ease-in-out;
cursor: pointer;
position: relative;
}
& .hero-card:hover {
transform: rotate(3deg);
}
& .hero-card:hover .inverted {
background: linear-gradient(
  0deg,
  rgba(6, 36, 67, 0) 0%,
  rgba(6, 36, 67, 0) 100%
);
}
& .hero-card:hover .inverted::after {
  opacity: 0;
}
& .inverted {
background: linear-gradient(
  0deg,
  rgba(6, 36, 67, 0.7) 0%,
  rgba(6, 36, 67, 0.7) 100%
);
}
& .inverted::after {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    background: var(--navy);
    top: 0;
    left: 0;
    opacity: 0.6;
    border-radius: 10px;
    transition: opacity 0.3s ease-in-out;
}
& .hero-card *:not(.headshot) {
z-index: 100;
}
& img.headshot {
position: absolute;
top: 180px;
left: 40px;
border-radius: 10px;
height: 230px;
width: 210px;
object-fit: cover;
z-index: 1;
transition: all 0.5s ease-in-out;
}
& .br-10 {
border-radius: 10px;
}
& .hero-card:hover .card-info::after {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  background: linear-gradient(0deg, var(--navy) 0%, transparent 50%);
  top: 0;
  left: 0;
  border-radius: 10px;
  z-index: 0;
}
& .hero-card.light-bg:hover .card-info p, .hero-card.light-bg:hover .card-info h3, .hero-card.light-bg:hover .card-crumb {
  color: #fff !important;
}
& .hero-card:hover img.headshot {
top: 0;
left: 0;
height: 100%;
width: 100%;
}
& img.headshot {
top: 0;
left: 0;
height: 100%;
width: 100%;
mask-image: url('/wp-content/uploads/2025/04/Vector-01.png');
mask-repeat: no-repeat;
mask-position: 20px 45%;
mask-size: 50%;
clip-path: none;
}
& .hero-card:hover img.headshot {
mask-size: 300%;
mask-position: 50% 50% !important;
}
& .slider-cards a {
text-decoration: none;
color: inherit;
}
& .card-crumb {
font-size: 14px;
font-family: "Titillium Web", sans-serif;
font-weight: 600;
text-transform: uppercase;
margin: 0;
letter-spacing: 1.25px;
}
& .card-info h3 {
font-size: 48px;
font-family: "Neuton", serif;
line-height: 1.1;
margin: 0;
position: relative;
}
& .card-info p {
font-size: 21px;
font-family: "Titillium Web", sans-serif;
line-height: 1.3;
margin: 1em 0;
position: relative;
}
& .card-crumb,
& .card-info h3,
& .card-info p {
color: #fff;
}
& .light-bg .card-crumb,
& .light-bg .card-info h3,
& .light-bg .card-info p {
color: #231f20;
}
& .main-header {
  text-align: center;
  margin: 280px auto 280px auto;
}
& .main-header h2 {
  font-size: 72px;
  font-family: "Titillium Web", sans-serif;
  font-weight: 600;
  line-height: 1.1;
  color: #000;
  margin: 15px auto;
}
& .main-header img {
  display: inline-block;
  margin: -120px 0;
}
& .main-header p {
  font-size: 36px;
  font-family: "Neuton", serif;
  font-weight: 400;
  line-height: 1.1;
}
/* & .cards-main-overlay {
    padding: 60px 0;
    background: rgb(255, 255, 255, 0.96);
} */
& button#load-more {
  font-family: "Titillium Web";
  font-size: 22px;
  font-weight: 700;
  color: #000;
  background-color: #B5834C;
  padding: 20px 65px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.25);
  border-radius: 110px;
}
& .load-more-container {
  text-align: center;
  margin: 0px auto 280px auto;
}
& .post-modal {
  display: none;
  position: fixed;
  z-index: 99999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(9, 32, 53, 0.95);
}
& .modal-content {
  background-color: #fff;
  margin: 5% auto;
  padding: 40px 0px 40px 0px;
  width: 80%;
  max-width: 1240px;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  position: relative;
}
& .modal-content .modal-image, & .modal-content .image-slider, & .modal-content > img {
  margin-top: -40px;
}
& .modal-content .image-slider {
  margin-bottom: -60px;
}
& .modal-content .card-info h4 {
  font-size: 26px;
  color: #000;
  margin: 0;
}
& .modal-content .card-info ul {
margin-top: 20px;
}
& .modal-content .card-info ul {
margin-top: 20px;
margin-bottom: 40px;
}
& .modal-content .card-info ul ul {
margin-top: 10px;
}
& .modal-content .card-info ul ul li {
list-style-type: circle;
}
& .modal-content .card-info li {
font-size: 18px;
color: #000;
margin-bottom: 5px;
}
& .close-modal {
  position: absolute;
  top: 15px;
  right: 20px;
  cursor: pointer;
  font-size: 24px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 110px;
  border: 1px solid #a78152;
  color: #a78157;
  padding: 6px 20px;
  z-index: 999;
}
& .modal-content .image-slider .swiper-button-next, & .modal-content .image-slider .swiper-button-prev {
  width: 60px;
  height: 40px;
  border-radius: 50px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #a78152;
}
& .modal-content .image-slider .swiper-button-next::after, & .modal-content .image-slider .swiper-button-prev::after {
  font-size: 20px;
  font-weight: bold;
  color: #a78157;

}
& .modal-content img {
  border-radius: 10px 10px 0px 0px;
  width: 100%;
  height: auto;
  max-height: 70vh;
  object-fit: cover;
  margin-bottom: -60px;
}
& .image-slider {
z-index: 0;
}

& .swiper-button-next::after, & .swiper-button-prev::after {
color: rgba(0, 0, 0, 0.6);
}
& .close-modal:hover {
  color: #666;
}

& .post-meta {
  margin-bottom: 20px;
  color: #666;
}

& .post-meta span {
  margin-right: 15px;
}

& .post-content {
  line-height: 1.6;
}
& .modal-content img {
  border-radius: 10px 10px 0px 0px;
  width: 100%;
}
& .modal-content .card-info {
  padding: 40px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0px 20px 100px 0px rgba(0, 0, 0, 0.45);
  width: 90%;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
& .modal-content a {
  display: inline-block;
  margin-top: 20px;
  padding: 20px 65px;
  background-color: #a78157;
  color: white;
  text-decoration: none;
  border-radius: 110px;
}
& .modal-content .card-crumb {
  font-size: 18px;
  margin-bottom: 40px;
}
& .modal-content .card-info img {
  opacity: 0.2;
  position: absolute;
  bottom: -30%;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  right: -30%;
  z-index: 10;
  object-fit: contain;
  margin-bottom: 0;
}
& .modal-content .card-info * {
  position: relative;
  z-index: 999;
}
& .post-modal .cards-main {
  background: none;
  padding: 0;
}
& .post-modal .cards-main * {
  color: #fff;
}
& .post-modal .cards-main .light-bg * {
  color: #000;
}
& .post-modal .main-header {
  margin: 120px auto 180px auto;
}
& .post-modal .main-header h2 {
  color: #fff;
}
& .card-info:has(.benefit) {
  margin-top: 0;
}
& .modal-content:has(.benefit) .card-info img {
  opacity: 1;
  width: auto;
  position: relative;
  right: 0;
  bottom: 0;
}
& .benefit {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 20px;
}
& .card-info:has(.benefit) {
  margin: 0;
  width: 100%;
}
& .modal-content:has(.benefit) {
  padding: 0;
}
}
/* Add animation */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes scaleUp {
    from {
      scale: 0;
    }
    to {
      scale: 1;
    }
  }
html:has(.post-modal.show) .navigation-wrapper {
  display: none;
}
.career-cards-block {
  & .post-modal.show {
  display: block;
  animation: fadeIn 1s, scaleUp 0.5s;
}
& .post-modal p,
& .post-modal h3 {
  color: #000;
}
}
@media screen and (max-width: 1280px) and (min-width: 769px){
  .career-cards-block {
      & .slider-cards {
      grid-template-columns: 1fr 1fr;
  }
  & .hero-card {
      margin-top: 0px !important;
  }
}
}
.career-cards-block {
  & .hero-card:not(.related .hero-card), & .hero-content {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 2s ease, transform 1s ease;
}

& .fade-in-up {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

& .hero-card.fade-in-up:hover {
opacity: 1;
transform: translateY(0) rotate(3deg) !important;
}
}

/* Hover text color option (per-card) */
.career-cards-block {
  & .hero-card.hover-text-color .card-crumb {
    transition: color 0.3s ease-in-out;
  }
  & .hero-card.hover-text-color:hover .card-crumb {
    color: #294f72 !important;
  }
}