/**
 * Overlapping Media Hero Block Styles
 *
 * Block: overlapping-media-hero
 * Purpose: Hero section with centered content and media that
 *   overlaps bottom edge via negative margin spacer technique
 *
 * CSS Classes & BEM Structure:
 * - .overlapping-media-hero: Main container (light gray background)
 * - .overlapping-media-hero__logo: Logo image (max 250px)
 * - .overlapping-media-hero__subhead: Subtitle badge (primary-200
 *   color, 15px)
 * - .overlapping-media-hero__headline: Main title (40px, max 850px)
 * - .overlapping-media-hero__description: Body text (15px, max
 *   875px)
 * - .overlapping-media-hero__cta: Primary button (rounded 50px,
 *   primary-200 bg)
 * - .overlapping-media-hero__anchor-link: Scroll indicator with
 *   bounce animation
 * - .overlapping-media-hero__video-container: Video/iframe wrapper
 *   (275px max-height)
 * - .overlapping-media-hero__spacer: Invisible spacer for overlap
 *   effect (330px height, -140px margin-bottom)
 *
 * Responsive Breakpoints:
 * - Centered layout with text alignment on all screens
 *
 * Animations & Effects:
 * - CTA hover: Background white, text color inverts
 * - Bounce animation: Scroll arrow bounces 5px down/up on hover
 *   (0.6s infinite)
 * - Overlap effect: Achieved via negative margin on spacer div
 * - Video sizing: Max 275px height, responsive width (100%)
 */
/*
 * Abstracts: Core Exports
 *
 * DESCRIPTION
 * Entry point that forwards all abstract modules (functions, variables,
 * mixins) for convenient importing throughout the codebase.
 *
 * USAGE
 * Import entire abstracts layer: @use "../../abstracts/core" as *;
 * All functions, variables, and mixins become available after import.
 */
/*
 * Abstracts: Sass Functions
 *
 * DESCRIPTION
 * Custom Sass functions for calculations, conversions, and utilities.
 * Used throughout the codebase for consistent value transformations.
 *
 * KEY FUNCTIONS
 * - decimal-round: Rounds numbers to specific decimal places
 * - rem: Converts px values to rem units using $base (16px)
 * - Other utility functions for calculations
 *
 * USAGE
 * @use "function" as *;
 * $font-size: rem(24);  // Returns 1.5rem
 */
/**
 * Rounds a number to specified decimal places
 *
 * @param {number} $number - Value to round
 * @param {number} $digits - Number of decimal places
 * @param {string} $mode - round, ceil, or floor
 * @return {number} Rounded value
 */
/*
 * Abstracts: Core Exports
 *
 * DESCRIPTION
 * Entry point that forwards all abstract modules (functions, variables,
 * mixins) for convenient importing throughout the codebase.
 *
 * USAGE
 * Import entire abstracts layer: @use "../../abstracts/core" as *;
 * All functions, variables, and mixins become available after import.
 */
/*
 * Abstracts: Global Variables
 *
 * DESCRIPTION
 * Application-wide Sass variables including typography, color system,
 * spacing scales, and breakpoint definitions. All color and sizing
 * variables are defined here for consistent theming across components.
 *
 * USAGE
 * Import as: @use "variables" as *;
 * Access variables directly: $primary-100, $font-size-base, etc.
 */
/* Note: If need Disable Decimal-value functionilty open function.scss file */
/*
 * Abstracts: Core Exports
 *
 * DESCRIPTION
 * Entry point that forwards all abstract modules (functions, variables,
 * mixins) for convenient importing throughout the codebase.
 *
 * USAGE
 * Import entire abstracts layer: @use "../../abstracts/core" as *;
 * All functions, variables, and mixins become available after import.
 */
/*
 * Abstracts: Global Mixins
 *
 * DESCRIPTION
 * Reusable Sass mixins for responsive design, utility patterns, and
 * common styling needs. Includes media query helpers, flexbox utilities,
 * and other frequently used patterns.
 *
 * KEY MIXINS
 * - respond-above: Media query min-width breakpoint
 * - respond-below: Media query max-width breakpoint
 * - respond-between: Media query range between two breakpoints
 * - flex patterns and other utility mixins
 *
 * USAGE
 * Import as: @use "mixins" as *;
 * Call mixin: @include respond-above(md) { ... }
 */
/* mini laptop resolution 1349 X 662 and 1246 X 681 and 1218 X 672 */
/* Mozila Firefox */
.overlapping-media-hero {
  text-align: center;
  background: #f3f7f9;
  border-bottom: 1px solid #ccccd2;
  position: relative;
  padding-bottom: 0rem;
  padding-top: 5px !important;
}
.overlapping-media-hero__logo {
  max-width: 250px;
  height: auto;
  margin-top: 1rem;
  margin-bottom: 0;
}
.overlapping-media-hero__subhead {
  color: #1565c0;
  text-align: center;
  font-size: 15px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  margin-top: 2.5rem;
  margin-bottom: 2rem;
}
.overlapping-media-hero__headline {
  color: #081d4d;
  text-align: center;
  font-size: 40px;
  font-style: normal;
  font-weight: 600;
  line-height: 136.207%;
  margin-bottom: 1.8rem;
  max-width: 850px;
  margin-left: auto;
  margin-right: auto;
}
.overlapping-media-hero__description {
  color: #081d4d;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-bottom: 1rem;
  display: block;
  max-width: 875px;
  margin-left: auto;
  margin-right: auto;
}
.overlapping-media-hero__cta {
  color: #FFF;
  font-size: 14px;
  font-weight: 600;
  border-radius: 50px;
  background: #1565c0;
  padding: 0.75rem 1.5rem;
  border: 2px solid #1565c0;
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
}
.overlapping-media-hero__cta:hover {
  background-color: #fff;
  color: #1565c0;
  text-decoration: none;
}
.overlapping-media-hero__anchor-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #081d4d;
  font-size: 14px;
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 60px;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
.overlapping-media-hero__anchor-link svg {
  margin-top: 5px;
  height: 22px;
}
.overlapping-media-hero__anchor-link:hover {
  text-decoration: none;
}
.overlapping-media-hero__anchor-link:hover svg {
  animation: bounce-down 0.6s infinite;
}
@keyframes bounce-down {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(5px);
  }
}
.overlapping-media-hero__video-container {
  height: 100%;
  width: 100%;
  max-height: 275px;
  max-width: 875px;
}
.overlapping-media-hero__video-container video {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
}
.overlapping-media-hero__video-container iframe {
  max-width: 875px;
  height: 280px;
  width: 100%;
  max-height: 100%;
}
.overlapping-media-hero__spacer {
  height: 330px;
  margin-bottom: -140px;
  pointer-events: none;
}