/* =========================================================
   DATA PRODUCT HERO
========================================================= */

.data-product-hero {
  position: relative;

  width: 100%;

  overflow: hidden;

  isolation: isolate;

  background-color: #032f58;

  background-image:
    url("/wp-content/themes/semarchy2024/assets/images/platform_leadspace.png");

  background-repeat: no-repeat;

  background-size: cover;

  background-position: center;

  box-sizing: border-box;
}

.data-product-hero__media-card .custom-code-wrapper {
    margin-top: 0px;
}


/* =========================================================
   LIGHT MODE BACKGROUND
========================================================= */

.data-product-hero--light {
  background-color: #ffffff;

  background-image:
    url("/wp-content/themes/semarchy2024/assets/images/homepage_leadspace.png");

  background-repeat: no-repeat;

  background-size: cover;

  background-position: center;
}


/* =========================================================
   DECORATIVE CURVED LINES
   DISABLED - NOW PART OF BACKGROUND IMAGE
========================================================= */

.data-product-hero::before,
.data-product-hero::after {
  display: none;
}


/* =========================================================
   EXTRA BACKGROUND LINES
   DISABLED - NOW PART OF BACKGROUND IMAGE
========================================================= */

.data-product-hero__background-lines {
  display: none;
}


/* =========================================================
   INNER CONTAINER
========================================================= */

.data-product-hero__inner {
  position: relative;

  z-index: 2;

  width: 100%;
  max-width: 1300px;

  margin-left: auto;
  margin-right: auto;

  box-sizing: border-box;
}


/* =========================================================
   CONTENT
========================================================= */

.data-product-hero__content {
  width: 100%;
  max-width: 1000px;

  margin-left: auto;
  margin-right: auto;

  text-align: center;
}


/* =========================================================
   HEADING
========================================================= */

.data-product-hero__heading {
  width: 100%;
  max-width: 980px;

  color: #ffffff !important;

  line-height: 1.06;

  font-weight: 600;

  letter-spacing: -0.025em;

  text-align: center;

  text-wrap: balance;
}


/* Light Mode */

.data-product-hero--light
.data-product-hero__heading {
  color: #003b72 !important;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.data-product-hero__description {
  width: 100%;
  max-width: 760px;
font-family:Inter,sans-serif;
  margin-left: auto;
  margin-right: auto;

  color:
    rgba(
      255,
      255,
      255,
      0.94
    );

  text-align: center;
}


.data-product-hero__description p {
  margin: 0;
font-family:Inter,sans-serif;
  color: inherit;
}


/* Light Mode */

.data-product-hero--light
.data-product-hero__description {
    font-family:Inter,sans-serif;
  color: #001d39 !important;
}


.data-product-hero--light
.data-product-hero__description p {
    font-family:Inter,sans-serif;
  color: #001d39 !important;
}


/* =========================================================
   BUTTON WRAPPER
========================================================= */

.data-product-hero__buttons {
  display: flex;

  align-items: center;
  justify-content: center;

  flex-wrap: wrap;

  gap: 14px;

  margin-top: 24px;
}


/* =========================================================
   BUTTON
========================================================= */

.data-product-hero__button {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-height: 44px;

  padding: 16px 32px;

  border:
    2px solid
    #ffffff;

  border-radius: 9999px;

  font-weight: 500;

  text-decoration: none;

  box-sizing: border-box;

  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}


.data-product-hero__button:hover {
  transform: translateY(-1px);
}


/* =========================================================
   PRIMARY BUTTON
   DARK MODE
========================================================= */

.data-product-hero__button--primary {
  background: #ffffff;

  border-color: #ffffff;

  color: #062d53;
}


.data-product-hero__button--primary:hover,
.data-product-hero__button--primary:focus {
  background: #fff;

  border-color: #fff;

  color: #001d39;
}


/* =========================================================
   PRIMARY BUTTON
   LIGHT MODE
========================================================= */

.data-product-hero--light
.data-product-hero__button--primary {
  background: #001d39;

  border-color: #001d39;

  color: #ffffff;
}


.data-product-hero--light
.data-product-hero__button--primary:hover,
.data-product-hero--light
.data-product-hero__button--primary:focus {
  background: rgb(38 63 87 / var(--tw-bg-opacity,1));

  border-color: rgb(38 63 87 / var(--tw-bg-opacity,1));

  color: #ffffff;
}


/* =========================================================
   SECONDARY BUTTON
   DARK MODE
========================================================= */

.data-product-hero__button--secondary {
  background: transparent;

  border-color: #ffffff;

  color: #ffffff;
}


.data-product-hero__button--secondary:hover,
.data-product-hero__button--secondary:focus {
  background:
    rgba(
      255,
      255,
      255,
      0.1
    );

  border-color: #ffffff;

  color: #ffffff;
}


/* =========================================================
   SECONDARY BUTTON
   LIGHT MODE
========================================================= */

.data-product-hero--light
.data-product-hero__button--secondary {
    background: #001d39;

  border-color: #001d39;

  color: #ffffff;
}


.data-product-hero--light
.data-product-hero__button--secondary:hover,
.data-product-hero--light
.data-product-hero__button--secondary:focus {
  background: rgb(38 63 87 / var(--tw-bg-opacity,1));

  border-color: rgb(38 63 87 / var(--tw-bg-opacity,1));

  color: #ffffff;
}


/* =========================================================
   MEDIA
========================================================= */

.data-product-hero__media {
  position: relative;

  z-index: 3;

  width: 100%;

  max-width:
    var(
      --dph-media-max-width,
      1160px
    );
}


/* =========================================================
   MEDIA CARD
========================================================= */

.data-product-hero__media-card {
  position: relative;

  width: 100%;

  min-height: 245px;

  display: flex;

  align-items: center;
  justify-content: center;

  overflow: hidden;


  border-radius: 18px;

  border: 0;

  box-sizing: border-box;

  box-shadow:
    0
    2px
    4px
    rgba(
      0,
      0,
      0,
      0.06
    );
}


/* =========================================================
   LIGHT MODE MEDIA CARD
========================================================= */

.data-product-hero--light
.data-product-hero__media-card {
  background: #001d39;
}


/* =========================================================
   IMAGE
========================================================= */

.data-product-hero__image {
  display: block;

  width: 100%;
  height: auto;

  max-width: 100%;

  margin-left: auto;
  margin-right: auto;

  object-fit: contain;

  object-position: center;
}


/* =========================================================
   EMBED
========================================================= */

.data-product-hero__embed {
  position: relative;

  width: 100%;

  min-height:
    var(
      --dph-embed-height,
      320px
    );

  display: flex;

  align-items: center;
  justify-content: center;

  overflow: hidden;

  box-sizing: border-box;
}


.data-product-hero__embed iframe {
  display: block;

  width: 100%;

  height:
    var(
      --dph-embed-height,
      320px
    );

  min-height:
    var(
      --dph-embed-height,
      320px
    );

  margin: 0;

  padding: 0;

  border: 0;

  background: transparent;

  opacity: 1;

  visibility: visible;
}


/* =========================================================
   VIDEO MEDIA CARD
========================================================= */

.data-product-hero__media-card--video {
  width: 100%;

  max-width: 825px;

  min-height: 0;

  margin-left: auto;
  margin-right: auto;

  padding: 0;

  overflow: visible;

  background: transparent;

  border: 0;

  border-radius: 0;

  box-shadow: none;
}


/* Override light mode normal media-card background */
.data-product-hero--light
.data-product-hero__media-card--video {
  background: transparent;
}


/* =========================================================
   VIDEO
========================================================= */

.data-product-hero__video {
  position: relative;

  width: 100%;
  max-width: 825px;

  min-height: 0 !important;

  margin-left: auto;
  margin-right: auto;

  aspect-ratio: 16 / 9;

  overflow: hidden;

  background: #001d39;

  border: 0;

  border-radius: 18px;

  box-shadow:
    0
    10px
    30px
    rgba(
      0,
      29,
      57,
      0.2
    );
}


.data-product-hero__video iframe {
  display: block;

  width: 100%;
  height: 100%;

  min-height: 0 !important;

  margin: 0;

  padding: 0;

  aspect-ratio: 16 / 9;

  border: 0;

  border-radius: 18px;

  background: #001d39;

  opacity: 1;

  visibility: visible;
}


/* =========================================================
   LIGHT MODE VIDEO SHADOW
========================================================= */

.data-product-hero--light
.data-product-hero__video {
  box-shadow:
    0
    10px
    30px
    rgba(
      0,
      29,
      57,
      0.2
    );
}


/* =========================================================
   TABLET
========================================================= */

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

  /*
   * DARK MODE
   */

  .data-product-hero:not(.data-product-hero--light) {
    background-color: #032f58;

    background-image:
      url("/wp-content/themes/semarchy2024/assets/images/platform_leadspace.png");

    background-repeat: no-repeat;

    background-size: cover;

    background-position: top center;
  }


  /*
   * LIGHT MODE
   */

  .data-product-hero.data-product-hero--light {
    background-color: #ffffff;

    background-image:
      url("/wp-content/themes/semarchy2024/assets/images/homepage_leadspace.png");

    background-repeat: no-repeat;

    background-size: cover;

    background-position: top center;
  }


  .data-product-hero__heading {
    max-width: 800px;

    font-size:
      clamp(
        38px,
        6vw,
        52px
      );
  }


  .data-product-hero__description {
    font-family:Inter,sans-serif;
    max-width: 700px;
  }


  .data-product-hero__media-card {
    min-height: 220px;

    padding:
      16px
      20px;
  }


  /*
   * Video should NOT inherit normal media-card padding
   */

  .data-product-hero__media-card--video {
    max-width: 425px;

    min-height: 0;

    padding: 0;
  }

}


/* =========================================================
   MOBILE
========================================================= */

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

  /*
   * DARK MODE
   */

  .data-product-hero:not(.data-product-hero--light) {
    background-color: #032f58;

    background-image:
      url("/wp-content/themes/semarchy2024/assets/images/platform_leadspace.png");

    background-repeat: no-repeat;

    background-size: cover;

    background-position: top center;
  }


  /*
   * LIGHT MODE
   */

  .data-product-hero.data-product-hero--light {
    background-color: #ffffff;

    background-image:
      url("/wp-content/themes/semarchy2024/assets/images/homepage_leadspace.png");

    background-repeat: no-repeat;

    background-size: cover;

    background-position: top center;
  }


  .data-product-hero__buttons {
    gap: 12px;
  }


  .data-product-hero__button {
    min-height: 42px;

    padding:
      9px
      22px;

    font-size: 14px;
  }


  /* =========================================================
     NORMAL MEDIA CARD
  ========================================================= */

  .data-product-hero__media-card {
    min-height: 180px;

    padding: 10px;

    border-radius: 14px;
  }


  /* =========================================================
     VIDEO CARD
  ========================================================= */

  .data-product-hero__media-card--video {
    width: 100%;

    max-width: 425px;

    min-height: 0;

    padding: 0;

    background: transparent;

    border: 0;

    border-radius: 0;

    box-shadow: none;
  }


  .data-product-hero__image {
    max-height: 260px;
  }


  /* =========================================================
     NORMAL EMBED
  ========================================================= */

  .data-product-hero__embed:not(.data-product-hero__video),
  .data-product-hero__embed:not(.data-product-hero__video) iframe {
    min-height: 220px;

    height: 220px;
  }


  /* =========================================================
     VIDEO
  ========================================================= */

  .data-product-hero__video {
    width: 100%;

    max-width: 825px;

    min-height: 0 !important;

    height: auto;

    aspect-ratio: 16 / 9;

    border-radius: 14px;

    box-shadow:
      0
      8px
      24px
      rgba(
        0,
        29,
        57,
        0.18
      );
  }


  .data-product-hero__video iframe {
    width: 100%;

    height: 100%;

    min-height: 0 !important;

    aspect-ratio: 16 / 9;

    border: 0;

    border-radius: 14px;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (
  prefers-reduced-motion: reduce
) {

  .data-product-hero__button {
    transition: none;
  }

}