/* Apex Safety USA — landing & job site hero imagery */

/* Hide template shape graphic (840×521 PNG was showing through as “840” text) */
.slider-area.style-1.apex-job-site-hero .te-slider-shape-img,
.slider-area.style-1.apex-landing-hero .te-slider-shape-img {
  display: none !important;
}

/* Hero: photo on the right only; text stays on navy panel (left) */
.slider-area.style-1.apex-job-site-hero .te-single-slider .te-slider-img,
.slider-area.style-1.apex-landing-hero .te-single-slider .te-slider-img {
  width: 54%;
  left: auto;
  right: 0;
  clip-path: none;
  -webkit-clip-path: none;
  overflow: hidden;
}

.slider-area.style-1.apex-job-site-hero .te-single-slider .te-slider-img img,
.slider-area.style-1.apex-landing-hero .te-single-slider .te-slider-img img {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  object-fit: cover;
  object-position: 42% 40%;
  transform: none;
}

.slider-area.style-1.apex-job-site-hero .te-slider-content .te-slider-title,
.slider-area.style-1.apex-landing-hero .te-slider-content .te-slider-title {
  max-width: none;
}

.slider-area.style-1.apex-job-site-hero .te-slider-content-wrapper,
.slider-area.style-1.apex-landing-hero .te-slider-content-wrapper {
  max-width: 640px;
}

@media only screen and (min-width: 768px) {
  .slider-area.style-1.apex-job-site-hero .te-slider-content-wrapper,
  .slider-area.style-1.apex-landing-hero .te-slider-content-wrapper {
    transform: translateX(-35%);
  }
}

@media only screen and (min-width: 992px) {
  .slider-area.style-1.apex-job-site-hero .te-single-slider .te-slider-img img,
.slider-area.style-1.apex-landing-hero .te-single-slider .te-slider-img img {
    object-position: 38% 35%;
  }
}

@media only screen and (min-width: 1200px) {
  .slider-area.style-1.apex-job-site-hero .te-single-slider .te-slider-img,
  .slider-area.style-1.apex-landing-hero .te-single-slider .te-slider-img {
    width: 58%;
  }

  .slider-area.style-1.apex-job-site-hero .te-single-slider .te-slider-img img,
.slider-area.style-1.apex-landing-hero .te-single-slider .te-slider-img img {
    object-position: 35% 30%;
  }
}

.about-us-area .te-about-image-card.style-2 .about-img-one img,
.apex-landing-about .te-main-img-wrapper img {
  border-radius: 8px;
  object-fit: cover;
  width: 100%;
  min-height: 420px;
}

.promotion-area .apex-landing-cta-img img,
.promotion-area .promotion-image-wrapper img,
.apex-landing-cta-img img {
  display: block;
  border-radius: 8px;
  object-fit: cover;
  object-position: center;
  width: 100%;
  max-width: 632px;
  height: auto;
  min-height: 280px;
  aspect-ratio: 632 / 317;
  max-height: none;
  margin-left: auto;
}

.promotion-area.background-gray-900 .apex-promo-staffing-img {
  line-height: 0;
}

.apex-landing-service-img {
  margin-bottom: 20px;
  border-radius: 8px;
  overflow: hidden;
}

.apex-landing-service-img img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Service cards — white icons inside red circles */
.te-info-card.style-4 .te-icon i {
  color: #ffffff !important;
  font-size: 32px;
  line-height: 1;
}

/* How it works — red step boxes (was navy #1B365D) */
.feature-area.style-1 .te-info-card.style-1 .te-icon {
  background-color: #c41e3a !important;
  color: #ffffff !important;
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
}

.feature-area.style-1 .te-info-card.style-1:hover .te-icon {
  background-color: #9e1830 !important;
  color: #ffffff !important;
}

.feature-area.style-1 .te-info-card.style-1.te-content-center {
  text-align: left;
}

.feature-area.style-1 .te-info-card.style-1.te-content-center .te-info-card-inner {
  align-items: flex-start;
}

.feature-area.style-1 .te-info-card.style-1 .te-content-wrapper {
  padding-left: calc(105px + 15%);
  text-align: left;
  width: 100%;
  box-sizing: border-box;
}

/* Mobile: show hero photo behind content (template hides .te-slider-img on small screens) */
@media only screen and (max-width: 767px) {
  .slider-area.style-1.apex-job-site-hero .te-single-slider {
    background-image: linear-gradient(
        180deg,
        rgba(27, 54, 93, 0.92) 0%,
        rgba(27, 54, 93, 0.88) 100%
      ),
      url("../images/apexImages/construction-workers-overseeing-construction-of-bu-2026-03-25-04-02-17-utc.jpg");
    background-size: cover;
    background-position: center 30%;
    background-repeat: no-repeat;
  }

  .slider-area.style-1.apex-landing-hero .te-single-slider {
    background-image: linear-gradient(
        180deg,
        rgba(27, 54, 93, 0.92) 0%,
        rgba(27, 54, 93, 0.88) 100%
      ),
      url("../images/apexImages/growing-the-city-on-a-grand-scale-2026-03-25-01-25-00-utc.jpg");
    background-size: cover;
    background-position: center 30%;
    background-repeat: no-repeat;
  }
}