/**
 * expandable-cards Block
 *
 * Styles for expandable card grid component with background SVG.
 * Cards expand on click with smooth animations. Includes responsive
 * layout, logo positioning, and navigation buttons.
 *
 * BEM STRUCTURE
 * - .expandable-cards: Main container with SVG background
 * - .ec-headline: Section title
 * - .ec-description: Section description
 * - .ec-row: Card grid container
 * - .ec-item: Individual card (max-width 258px, min-height 392px)
 * - .ec-item--logo: Logo container (hidden on expand)
 * - .ec-item--content: Expandable content (hidden until active)
 * - .ec-item--heading: Card title (margin-left animation)
 * - .ec-item.active: Active state (max-width 500px)
 * - .ec-buttons: Navigation button container
 * - .ec-button-prev/next: Arrow buttons (transparent)
 * - .ec-icon: Icon background (secondary-200 color)
 *
 * RESPONSIVE BREAKPOINTS
 * - respond-above(md): Background position 8% 70%
 * - respond-below(lg): Font size 18px, reduced icon size
 * - respond-below(md): Centered button layout
 *
 * ANIMATIONS
 * - all 0.4s ease: Card expand/collapse
 * - opacity 0.1s ease: Content fade-in
 * - opacity 0.4s 0.4s ease: Delayed content animation on active
 * - margin-left 0.2s ease: Heading slide animation
 * - SVG background positioned center 75%
 */
/*
 * 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 */
.expandable-cards {
  background-image: url("../../../assets/images/expandable_cards_bg.svg");
  background-repeat: no-repeat;
  background-position: center 75%;
  overflow: hidden;
}
@media (min-width: 768px) {
  .expandable-cards {
    background-position: 8% 70%;
  }
}
.expandable-cards .ec-headline {
  text-align: center;
  margin-bottom: 1rem;
}
.expandable-cards .ec-description {
  text-align: center;
}
@media (min-width: 768px) {
  .expandable-cards .ec-description {
    max-width: 680px;
    margin: 0 auto;
  }
}
.expandable-cards .ec-row {
  gap: 16px;
  justify-content: space-between;
  flex-wrap: nowrap;
  margin: 4rem 0 0;
}
.expandable-cards .ec-item {
  position: relative;
  max-width: 258px;
  min-height: 392px;
  border-radius: 25px;
  display: flex;
  flex-direction: column;
  justify-content: end;
  transition: all 0.4s ease;
  padding: 1rem 2rem;
  background-size: cover;
  overflow: hidden;
}
.expandable-cards .ec-item a {
  text-decoration: none;
}
.expandable-cards .ec-item--logo {
  position: relative;
  z-index: 1;
  transition: all 0.4s ease;
  margin-bottom: 16px;
  text-align: center;
}
.expandable-cards .ec-item--logo img {
  max-width: 160px;
  max-height: 80px;
  width: auto;
  height: auto;
}
.expandable-cards .ec-item--content {
  position: relative;
  font-weight: 600;
  z-index: 1;
  opacity: 0;
  height: 100px;
  transition: opacity 0.1s ease;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.expandable-cards .ec-item--heading {
  font-size: 20px;
  font-weight: 600;
  line-height: 27px;
  margin-left: -100px;
  transition: all 0.2s ease;
}
@media (max-width: 991px) {
  .expandable-cards .ec-item--heading {
    font-size: 18px;
  }
}
.expandable-cards .ec-item.active {
  max-width: 500px;
  padding: 1rem 2rem;
}
@media (max-width: 991px) {
  .expandable-cards .ec-item.active {
    padding: 1rem;
  }
}
.expandable-cards .ec-item.active .ec-item--content {
  opacity: 1;
  transition: opacity 0.4s 0.4s ease;
}
.expandable-cards .ec-item.active .ec-item--heading {
  margin-left: 0px;
}
.expandable-cards .ec-item.active .ec-item--logo {
  text-align: left;
}
.expandable-cards .ec-buttons {
  text-align: right;
  margin-top: 24px;
}
@media (max-width: 767px) {
  .expandable-cards .ec-buttons {
    text-align: center;
  }
}
.expandable-cards .ec-buttons svg path {
  stroke: #081d4d;
}
.expandable-cards .ec-button-prev, .expandable-cards .ec-button-next {
  background-color: transparent;
  border: none;
}
.expandable-cards .ec-button-prev {
  margin-left: 8px;
  margin-right: 16px;
}
.expandable-cards .ec-icon {
  height: 68px;
  width: 68px;
  background-color: #5fd6ff;
  color: #fff;
}
.expandable-cards .ec-icon:hover {
  background-color: #96eaaa;
}
@media (max-width: 991px) {
  .expandable-cards .ec-icon {
    height: 56px;
    width: 56px;
  }
}