/* =============================
           TYPOGRAPHY (Base Styles)
        ============================= */
        h1 {
          font-size: 2.8rem;
          font-weight: 300;
          text-align: left;
        }

        h3 {
          font-size: 1.5rem;
          line-height: 1.2;
        }

        /* =============================
           VIDEO BACKGROUND
        ============================= */
        .video-background {
          position: relative;
          overflow: hidden;
          height: 80vh;
          padding: 15px;
          border-bottom: 3px solid rgba(55, 108, 145, 1);
        }

        .video-background video {
          position: absolute;
          top: 50%;
          left: 50%;
          min-width: 100%;
          min-height: 100%;
          width: auto;
          height: auto;
          transform: translate(-50%, -50%);
          object-fit: cover;
          opacity: 0.8;
          z-index: 5;
        }

        /* =============================
           VIDEO OVERLAY
        ============================= */
        .video-overlay-content {
          position: relative;
          z-index: 1;
          color: white;
          text-align: center;
          padding-top: 30vh;
        }

        /* =============================
           ROTATE FADE-IN
        ============================= */
        .rotate-fade-in {
          float: left;
          position: relative;
          margin-left: -50px;
          margin-right: 20px;
          width: 170px;
          height: 170px;
          opacity: 0.2;
          animation: rotateFade 2s ease-out forwards;
          transform-origin: center center;
          display: inline-block;
        }

        /* =============================
           STRATUM SCREENSHOT
        ============================= */
        .stratumscreenshot {
          width: 50%;
          float: right;
          margin: 0 0 0 15px;
        }

        /* =============================
           CARD STYLES
        ============================= */
        .card {
          opacity: 0;
          transform: translateX(-300px) scale(0.8);
          transition: transform 0.6s ease-out, opacity 0.6s ease-out;
          border: none !important;
          border-top: 2px solid blue;
        }

        .card.diagonal-top {
          clip-path: polygon(0 10px, 100% 0, 100% 100%, 0 100%);
        }

        .card.fly-in {
          opacity: 1;
          transform: translateX(0);
        }

        .card-title {
          font-weight: 500 !important;
          font-size: 2rem !important;
          line-height: 1;
          padding-top: 1rem;
        }

        .card-text {
          font-weight: 500 !important;
          font-size: 1rem !important;
          line-height: 1;
          padding-bottom: 1.1rem;
        }

        .card a.secrowbtn {
          font-weight: 500 !important;
          font-size: 1.2rem !important;
          line-height: 1.2;
        }

        /* =============================
           BACKGROUND IMAGE OPACITY
        ============================= */
        .bg-image-opacity {
          position: relative;
          z-index: 0;
          overflow: hidden;
          padding: 0.5rem;
        }

        .bg-image-opacity::before {
          content: "";
          position: absolute;
          top: 0; left: 0;
          width: 100%;
          height: 100%;
          background-size: cover;
          background-position: center;
          opacity: 0.1;
          z-index: -1;
        }

        .bg-1::before {
          background-image: url("/img/DataHub_1.png");
          background-color: rgba(183, 207, 240, 0.3);
        }

        .bg-2::before {
          background-image: url("/img/DataHub-2-p3.svg");
          background-color: rgba(183, 207, 240, 0.3);
        }
        .bg-3::before {
          background-image: url("/img/DataHub-1-p1.svg");
          background-color: rgba(183, 207, 240, 0.3);
        }

        .bg-4::before {
          background-image: url("/img/DataHub-1-p3.svg");
          background-color: rgba(183, 207, 240, 0.3);
        }

        /* =============================
           CASE STUDY SLIDE-UP ANIMATION
        ============================= */
        .case-studies {
          opacity: 0;
          transform: translateY(20px);
          animation: slideUp 0.6s ease-out forwards;
          animation-delay: calc(var(--i) * 0.3s);
        }

        /* =============================
           KEYFRAMES
        ============================= */
        @keyframes rotateFade {
          0% {
            transform: rotate(20deg);
            opacity: 0.2;
          }
          80% {
            transform: rotate(-390deg);
            opacity: .8;
          }

          100% {
            transform: rotate(-380deg);
            opacity: 1;
          }
        }

        @keyframes slideUp {
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }

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

        /* SMALL DEVICES (768px–992px) */
        @media screen and (min-width: 768px) and (max-width: 992px) {

          h1 {
            font-size: 2.25rem;
          }

          h3 {
            font-size: 1.3rem;
          }

          .video-background {
            height: auto;
            padding-bottom: 15px;
          }

          .video-background video {
            background-color: rgb(219, 224, 231);
          }

          .rotate-fade-in {
            margin-left: -10px !important;
            margin-right: 5px;
            width: 120px;
            height: 120px;
          }

          .stratumscreenshot {
            width: 50%;
            float: right;
            margin: 0 0 0 15px;
          }
        }

        /* PHONE PORTRAIT (<=767px) */
        @media screen and (orientation: portrait) and (max-width: 767px) {

          h1 {
            font-size: 2rem;
          }

          h3 {
            font-size: 1rem;
          }

          .video-background {
            height: auto;
            padding-bottom: 15px;
          }

          .rotate-fade-in {
            margin: 10px 5px 0 0 !important;
            width: 50px;
            height: 50px;
          }

          .stratumscreenshot {
            width: 50%;
            float: right;
            margin: 0 0 0 15px;
          }
        }

        /* PHONE LANDSCAPE (<=767px) */
        @media screen and (orientation: landscape) and (max-width: 767px) {

          h1 {
            font-size: 2rem;
          }

          h3 {
            font-size: 1rem;
          }

          .video-background {
            height: auto;
            padding-bottom: 15px;
          }

          .rotate-fade-in {
            margin: 10px 5px 0 -10px !important;
            width: 80px;
            height: 80px;
          }

          .stratumscreenshot {
            width: 50%;
            float: right;
            margin: 0 0 0 15px;
          }
        }

        /* MEDIUM AND UP (>=992px) */
        @media screen and (min-width: 992px) {
          .stratumscreenshot {
            display: none;
          }
        }
.section-title {
  font-size: 3rem;
  font-weight: 300 !important;
  margin-bottom: 1rem;
}

/* Featured Case Study Card */
.feature-card {
  min-height: 360px;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  background-image:
    var(--card-bg);
  background-repeat: no-repeat;
  background-position: center right -50px; /*, center right -100px;*/
  background-size: cover;
  display: flex;
  align-items: center;
  text-align: left;
}

.feature-card-content {
  width: 70%;
  padding: 2rem;
  position: relative;
  z-index: 2;
}

.feature-card h3 {
  font-size: 1.5rem;
  line-height: 1.25;
  margin-bottom: 1.25rem;
  font-weight: 700;
  color: #fff;
}

/* Popular Link Cards */
.popular-link-card {
  min-height: 200px;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  display: flex;
  /*align-items: flex-end;*/
  padding: 1.25rem;
  text-align: left;
  text-decoration: none;
  background-image:
   /* linear-gradient(90deg, rgba(0, 0, 0, 0.40) 0%, rgba(0, 0, 0, 0.04) 100%),*/
    var(--card-bg);
  background-repeat: no-repeat;
  background-position: center right; 

  background-size: cover;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.popular-link-card-tint {

    background-image:
   linear-gradient(90deg, rgba(0, 0, 0, 0.80) 0%, rgba(0, 0, 0, 0.04) 100%), 
    var(--card-bg);
   background-position: center right, center right -5px;

} 

.popular-link-card span {
  color: #fff;
  font-size: 1.5rem;
  line-height: 1.25;
  font-weight: 700;
  position: relative;
  z-index: 2;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.popular-link-card:hover,
.popular-link-card:focus {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
  text-decoration: none;
}

.popular-link-card:hover span,
.popular-link-card:focus span {
  text-decoration: underline;
}


/* Phone cleanup */
@media (max-width: 767.98px) {
  .section-title {
    font-size: 2.25rem;
  }

  .feature-card {
    text-align: center;
    background-image:
      var(--card-bg);

  }

  .feature-card-content {
    width: 100%;
    padding: 1.5rem;
  }

  .feature-card h3 {
    font-size: 1.5rem;
  }

  .popular-link-card {
    min-height: 125px;
  }
}

/* Case-study background */
.bg-case-wonder {
    --card-bg: url("../img/Wonder-Meats-Sandwich-2.jpg");
}

/* Popular-link backgrounds */
.bg-kpi {
    --card-bg: url("../img/faq-kpi-header.jpg");
}

.bg-unify-data {
    --card-bg: url("../img/how-to-unify-data.jpg");
}

.bg-datahub {
    --card-bg: url("../img/faq-datahub.jpg");
}

.bg-erp {
    --card-bg: url("../img/ERP-iStock-1071030554.jpg");
}

.bg-ai-bi {
    --card-bg: url("../img/ai-is-not-a-replacement-for-bi.jpg");
}

.bg-analytics-features {
    --card-bg: url("/blog/wp-content/uploads/2025/08/Evaluating-768x430.jpg");
}