/**
 * @file
 * Use this CSS file to override base CSS rules
 */

/* Set default font weight to 300 for better typography in high-density screens */

/* Base text */
body {
  font-family: "Source Sans Pro", "helvetica", "arial", sans-serif;
  font-weight: 300;
  font-size: clamp(18px, 1.25rem + 0.25vw, 22px); /* ~18→22px fluid */
  line-height: 1.6;
  color: #666;
}

/* Headings (shared) */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Source Sans Pro", "helvetica", "arial", sans-serif;
  font-weight: 300;
  font-style: normal;
  text-transform: none;
  line-height: 1.15;
  margin: 0 0 0.5em 0;
}

/* Individual levels (fluid) */
h1 {
  font-weight: 900;
  font-size: clamp(2rem, 4vw, 3rem); /* ~32→48px */
  text-align: center;
}

h1.page-title {
  font-size: clamp(2rem, 5vw, 3.5rem); /* ~32→56px */
  margin-bottom: 0.5em;
}

h2 {
  font-weight: 900;
  font-size: clamp(1.5rem, 3vw, 2.25rem); /* ~24→36px */
}

h3 {
  font-weight: 700;
  color: #fd7d00;
  font-size: clamp(1.25rem, 2.2vw, 1.75rem); /* ~20→28px */
}

h4,
h5,
h6 {
  font-weight: 700;
  font-size: clamp(1.25rem, 1.2vw, 1.75rem); /* ~16.8→20px */
}

h5,
h6 {
  text-transform: uppercase;
}
h6 {
  color: #fd7d00;
}

/* Title variants */
h2.title {
  font-size: clamp(2rem, 4vw, 3rem); /* ~32→48px */
  margin: 0 0 10px 0;
  font-weight: 900;
  text-align: center;
}

/* Let this selector inherit the fluid size instead of forcing a fixed 36px */
.col-md-12 h2.title {
  font-weight: 900; /* keep weight */
  margin: 20px 0 30px; /* keep spacing */
  text-align: center;
}

.paragraph.paragraph--type--bp-simple.quote-block {
  margin-bottom: 5rem;
}

.header-top__container {
  border: none;
  padding: 0;
  height: 0;
}

.header-container ul.menu li a.sf-depth-2 {
  color: white;
}

.region--dark-typography ul.menu li a.sf-depth-2.is-active:hover {
  color: #2393d1;
}

.banner-text {
  font-weight: 900;
  font-style: normal;
  text-transform: none;
  color: #fff;
  font-size: 5em;
  text-align: left;
  width: 80%;
  line-height: 1;
  left: 5%;
}

/* Outer wrapper defines the height via aspect-ratio; content fills into it */
.banner {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 450px;
  overflow: hidden;
}

/* Content wrapper maintains aspect ratio at all breakpoints */
.banner .slide__content {
  position: relative;
  aspect-ratio: 16 / 9;
  max-height: 450px;
  width: 100%;
  overflow: hidden;
}

/* Image fills entire container at all breakpoints */
.banner .slide__media {
  position: absolute;
  inset: 0;
}

.banner .slide__media .media--ratio,
.banner .slide__media .media {
  position: absolute !important;
  inset: 0 !important;
  padding-bottom: 0 !important;
  height: 100% !important;
}

.banner .slide__media .media__element,
.banner .slide__media img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  max-width: none !important;
}

/* Text overlay always positioned absolutely on image */
.banner .slick--skin--fullwidth .slide__constrained {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 2;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  margin: 0 !important;
  padding: clamp(16px, 5vw, 64px) clamp(16px, 5vw, 64px) clamp(16px, 5vw, 64px) clamp(16px, 5vw, 64px) !important;
}

/* Pull RevSlider out of the Bootstrap container chain so it fills .banner
   (its containing block) rather than being sized by the container's height */
.banner .rev_slider_wrapper {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* HTML5 background-video-block: section needs a floor to fill the banner */
.banner .background-video-block__section {
  min-height: 450px;
}

/* Make the video fill the wrapper */
.banner-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* crops to fill without distortion */
}

/* Overlay text on top of the video */
.banner-text {
  position: absolute;
  inset: 0; /* fill the banner */
  display: flex; /* centers vertically; switch to align-items:flex-end for bottom */
  align-items: center;
  justify-content: center; /* uncomment if you want centered horizontally */
  padding: clamp(16px, 5vw, 64px); /* responsive padding */
  pointer-events: none; /* clicks pass through to video if needed */
}

/* Typography that scales responsively */
.banner-text span {
  font-weight: 900;
  line-height: 1.05;
  color: #fff;
  font-size: clamp(28px, 6vw, 80px); /* responsive font size */
  max-width: 22ch; /* optional: limit line length */
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45); /* improve contrast on bright frames */
}

.banner-text .yellow {
  color: #eab308;
} /* your yellow; adjust as needed */

/* Optional: respect reduced-motion users */
@media (prefers-reduced-motion: reduce) {
  .banner-video {
    animation: none;
  }
}

.banner .slide__caption {
  width: auto !important;
}

.slide__overlay {
  font-weight: 900;
  font-style: normal;
  text-transform: none;
  color: #fff;
  font-size: clamp(28px, 6vw, 80px);
  text-align: left;
  line-height: 1.05;
  max-width: 22ch;
  margin: 0;
}

.slide__constrained .slide__link a {
  font-size: 1.75em;
}

@media (min-width: 64em) {
  .slide__constrained > .slide__caption {
    position: static;
    top: auto;
  }

  .banner .slick--skin--fullwidth .slide__constrained {
    padding-left: clamp(64px, 19vw, 450px) !important;
  }
}

.yellow {
  color: #e6b921;
}
.blue {
  color: #2493d1;
}
.dark-blue {
  color: #4372b8;
}
.orange {
  color: #ee7e22;
}

.intro-text p {
  font-weight: 400;
  font-style: normal;
  text-transform: none;
  font-size: 1.5em;
  color: #1e1e1e;
  text-align: center;
}
.intro-text {
  margin-bottom: 3em;
}

.offset-md-3 {
  margin-left: 25%;
}

.offset-md-2 {
  margin-left: 16.66%;
}

.featured__section {
  padding: 40px 0;
}

.paragraph > .paragraph__column {
  padding-bottom: 50px;
}

#block-customprojects {
  margin-top: 2em;
}
#superfish-main {
  margin-top: 1em;
}

/*------------------------------Responsive-------------------------*/


@media only screen and (max-width: 1023px) {
  .banner .slide__content {
    min-height: 180px;
    background: #111;
  }

  .banner .slide__overlay,
  .banner .slide__caption {
    color: #fff;
  }

  .banner .slick-prev,
  .banner .slick-next,
  .banner .slick__arrow {
    display: none !important;
  }
}

@media only screen and (max-width: 769px) {
  .banner .slide__constrained {
    min-height: unset;
  }
  .slide__constrained {
    min-height: 100px;
  }
  .slide__link {
    margin-left: 3.5em;
    margin-top: 0.5em;
    font-size: 0.85em;
  }
  h1.page-title {
    font-size: 2.5em;
  }
  .intro-text p {
    font-size: 1.25em;
  }
  .offset-md-2 {
    padding: 0;
    margin-left: 5%;
  }
}

@media only screen and (max-width: 415px) {
  .slide__overlay {
    font-size: 2.5em;
  }
  .slide__link {
    margin-left: 2.5em;
  }
  h1.page-title {
    font-size: 2em;
  }
  #block-applications .block {
    padding: 0;
  }
}


/**************************************************************
 * Company Feature View — COMPLETE CSS (replace existing)
 * View: .view-id-company_feature
 * Block: .view-display-id-block_1
 **************************************************************/

/* ---------- Grid (all breakpoints) ---------- */
.view-id-company_feature.view-display-id-block_1 .view-content {
  display: grid;
  gap: clamp(14px, 2.5vw, 28px);
  margin: 0 auto;
  max-width: 1020px; /* 3 x 320px + gaps */
}

/* Mobile: 1 column */
@media (max-width: 639px) {
  .view-id-company_feature.view-display-id-block_1 .view-content {
    grid-template-columns: 1fr;
  }
}

/* Tablet: 2 columns */
@media (min-width: 640px) and (max-width: 1023px) {
  .view-id-company_feature.view-display-id-block_1 .view-content {
    grid-template-columns: repeat(2, minmax(240px, 1fr));
    justify-content: center;
  }
  .view-id-company_feature.view-display-id-block_1 .views-row {
    grid-column: auto;
  }
}

/* Desktop: 3 cards per row, centered rows */
@media (min-width: 1024px) {
  .view-id-company_feature.view-display-id-block_1 .view-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .view-id-company_feature.view-display-id-block_1 .views-row {
    flex: 0 0 calc(33.333% - 20px);
    max-width: 320px;
  }
}

/* ---------- Card styles (each entity) ---------- */
.view-id-company_feature.view-display-id-block_1 .views-row {
  background: #fff;
  border: 1px solid #e5e7eb; /* light gray */
  border-radius: 14px;
  padding: clamp(16px, 2.4vw, 26px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);

  /* equal height + centered content */
  min-height: 220px; /* adjust to taste */
  display: flex;
  flex-direction: column;
  align-items: center; /* horizontal center */
  justify-content: center; /* vertical center */
  text-align: center;
  gap: 10px;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background-color 0.25s ease,
    border-color 0.25s ease;
}

/* Hover/Focus lift effect */
.view-id-company_feature.view-display-id-block_1 .views-row:hover,
.view-id-company_feature.view-display-id-block_1 .views-row:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
  background-color: #f9fafb;
  border-color: #d1d5db;
}

/* Make links inside look/behave like a single card */
.view-id-company_feature.view-display-id-block_1 .views-row a {
  color: inherit;
  text-decoration: none;
}
.view-id-company_feature.view-display-id-block_1 .views-row a:focus-visible {
  outline: 3px solid #2563eb; /* accessible keyboard focus */
  outline-offset: 4px;
  border-radius: 10px;
}

/* ---------- Field-level styling (adjust names if yours differ) ---------- */
.view-id-company_feature.view-display-id-block_1 .views-field-field-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 6px;
}

.view-id-company_feature.view-display-id-block_1 .views-field-field-icon img,
.view-id-company_feature.view-display-id-block_1 .views-field-field-icon svg {
  width: clamp(75px, 7vw, 150px);
  height: clamp(75px, 7vw, 150px);
  object-fit: contain;
}

/* Title field */
.view-id-company_feature.view-display-id-block_1 .views-field-title {
  font-weight: 800;
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
  line-height: 1.25;
  color: #111827; /* near-black */
  margin: 0;
}

/* Optional: if you add a body/summary later */
.view-id-company_feature.view-display-id-block_1 .views-field-body {
  color: #4b5563;
  font-size: clamp(1.25rem, 0.9rem + 0.5vw, 1.5em);
  line-height: 1.5;
  margin-top: 6px;
}

/* Certification logos: 2-column grid on mobile */
@media (max-width: 767px) {
  .paragraph--id--118 > .paragraph__column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: center;
  }
  .paragraph--id--118 .paragraph--type--bp-columns_4col {
    width: 100%;
  }
  .paragraph--id--118 .paragraph--type--bp-columns_4col img {
    width: 100%;
    height: auto;
  }
}

/* ---------- Dark mode (optional polish) ---------- */
/*@media (prefers-color-scheme: dark) {
  .view-id-company_feature.view-display-id-block_1 .views-row {
    background: #0b0f14;
    border-color: #1f2937;
    box-shadow: none;
  }
  .view-id-company_feature.view-display-id-block_1 .views-row:hover,
  .view-id-company_feature.view-display-id-block_1 .views-row:focus-within {
    background: #0f141a;
    border-color: #334155;
    box-shadow: 0 14px 30px rgba(0,0,0,.35);
  }
  .view-id-company_feature.view-display-id-block_1 .views-field-title { color: #e5e7eb; }
  .view-id-company_feature.view-display-id-block_1 .views-field-body  { color: #cbd5e1; }
}*/

/**************************************************************
 * Industry Experience View — based on homepage card styling
 * View: .view-id-applications
 * Block: .view-display-id-block_1
 **************************************************************/

/* ---------- Grid (all breakpoints) ---------- */
.view-id-applications.view-display-id-block_1 .view-content {
  display: grid;
  gap: clamp(14px, 2.5vw, 28px);
  margin: 0 auto;
  max-width: 1020px;
}

/* Mobile: 1 column */
@media (max-width: 639px) {
  .view-id-applications.view-display-id-block_1 .view-content {
    grid-template-columns: 1fr;
  }
}

/* Tablet: 2 columns */
@media (min-width: 640px) and (max-width: 1023px) {
  .view-id-applications.view-display-id-block_1 .view-content {
    grid-template-columns: repeat(2, minmax(240px, 1fr));
    justify-content: center;
  }
  .view-id-applications.view-display-id-block_1 .views-row {
    grid-column: auto;
  }
}

/* Desktop: 3 cards per row, centered rows */
@media (min-width: 1024px) {
  .view-id-applications.view-display-id-block_1 .view-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .view-id-applications.view-display-id-block_1 .views-row {
    flex: 0 0 calc(33.333% - 20px);
    max-width: 320px;
  }
}

/* ---------- Card styles (each entity) ---------- */
.view-id-applications.view-display-id-block_1 .views-row {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: clamp(16px, 2.4vw, 26px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);

  /* Card layout */
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: 12px;
  cursor: pointer;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background-color 0.25s ease,
    border-color 0.25s ease;
}

/* Hover/Focus lift effect */
.view-id-applications.view-display-id-block_1 .views-row:hover,
.view-id-applications.view-display-id-block_1 .views-row:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
  background-color: #f9fafb;
  border-color: #d1d5db;
}

/* Make links inside look/behave like a single card */
.view-id-applications.view-display-id-block_1 .views-row a {
  color: inherit;
  text-decoration: none;
}
.view-id-applications.view-display-id-block_1 .views-row a:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 4px;
  border-radius: 10px;
}

/* ---------- Field-level styling ---------- */
/* Image field with rounded corners - handles multiple field name variations */
.view-id-applications.view-display-id-block_1 .views-field[class*="image"],
.view-id-applications.view-display-id-block_1 .views-field[class*="featured"],
.view-id-applications.view-display-id-block_1 img.image-style-slick-rectangle {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 6px;
  overflow: hidden;
  border-radius: 10px;
}

.view-id-applications.view-display-id-block_1 .views-field[class*="image"] img,
.view-id-applications.view-display-id-block_1
  .views-field[class*="featured"]
  img,
.view-id-applications.view-display-id-block_1 img.image-style-slick-rectangle {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  margin-bottom: 16px;
}

/* Title field - inherits font size from body */
.view-id-applications.view-display-id-block_1 .views-field-title,
.view-id-applications.view-display-id-block_1 h3 {
  font-weight: 800;
  line-height: 1.25;
  color: #111827;
  margin: 0;
}

/* Body/Description field - inherits font size from body */
.view-id-applications.view-display-id-block_1 .views-field-body,
.view-id-applications.view-display-id-block_1
  [class*="views-field"]:not([class*="title"]):not([class*="image"]):not(
    [class*="button"]
  ):not([class*="link"]) {
  color: #4b5563;
  line-height: 1.5;
  margin: 4px 0;
}

/* Stretch the full chain so button reaches bottom of card */
.view-id-applications.view-display-id-block_1 .views-field-nothing,
.view-id-applications.view-display-id-block_1
  .views-field-nothing
  .field-content,
.view-id-applications.view-display-id-block_1 .application-button {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Button field - align to bottom */
.view-id-applications.view-display-id-block_1 .views-field-field-button,
.view-id-applications.view-display-id-block_1
  [class*="views-field"][class*="button"] {
  margin-top: auto;
  text-align: center;
}

/* Style Learn More buttons */
.view-id-applications.view-display-id-block_1
  .application-button
  > a.btn.btn-outline-warning {
  margin-top: auto;
}

.view-id-applications.view-display-id-block_1 .btn.btn-outline-warning {
  display: inline-block;
  padding: 10px 28px;
  background-color: #2393d1;
  color: #fff;
  border: none;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  transition: background-color 0.25s ease;
}

.view-id-applications.view-display-id-block_1 .btn.btn-outline-warning:hover {
  background-color: #1a7bb4;
}