/**
 * icon-grid Block
 *
 * Styles for icon grid layout with cards, section heading, and
 * animated CTA buttons. Supports dark mode and responsive sliders.
 *
 * BEM STRUCTURE
 * - .icon-grid: Main container (dark-mode modifier)
 * - .ig: Block prefix (icon-grid)
 * - __sec-heading: Section heading with h2/p (text-shadow modifier)
 * - __card: Card container grid
 * - __item: Individual card (padding/text-align responsive)
 * - __imgwrap: Icon container (50x50px, inline-flex)
 * - __detailwrap: Card content area (h5, description, btn-link)
 * - __cta: CTA button (animated gradient background)
 * - __slider-controls: Swiper pagination container
 * - __desc: Description text within card
 * - .rc-cardwrap: Card wrapper (left-aligned-icons modifier)
 *
 * RESPONSIVE BREAKPOINTS
 * - respond-above(md): row-gap 80px, center justify
 * - respond-below(md): flex-wrap nowrap, center text-align, no padding
 * - respond-below(xl): padding left/right 2rem
 *
 * ANIMATIONS & EFFECTS
 * - Gradient background animation on CTA hover
 * - background-position: left top to right top (0.3s ease-in-out)
 * - background-size: 200% 100% for two-tone gradient effect
 * - text-shadow on heading (optional .text-shadow class)
 * - Border color change on CTA hover (#5fd6ff)
 *
 * KEY FEATURES
 * - Icon sizing: 50x50px with object-fit contain
 * - CTA button with animated background gradient
 * - Blue gradient (36, 163, 239 to 21, 104, 194)
 * - Card gap 80px on desktop, adjusted on mobile
 * - Slider controls hidden by default, shown when pagination exists
 * - Dark mode inverts to white background
 * - Icon max-width 50% on dark mode
 * - Margin-bottom 32px on icon wraps
 */
/*
 * 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 */
.icon-grid {
  overflow: hidden;
}
.icon-grid .ig-cta {
  background: linear-gradient(90deg, rgb(36, 163, 239) 0%, rgb(21, 104, 194) 50%, rgb(36, 163, 239) 100%);
  background-size: 200% 100%;
  background-position: left top;
  transition: all 0.3s ease-in-out;
  color: white;
}
.icon-grid .ig-cta:hover {
  border-color: #5fd6ff;
  background-position: right top;
}
.icon-grid .ig-sec-heading {
  margin: 0 auto 5rem;
}
.icon-grid .ig-sec-heading h2 {
  font-size: 36px;
  font-style: normal;
  font-weight: 400;
  line-height: 60px;
  margin-bottom: 1.57rem;
}
.icon-grid .ig-sec-heading p {
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 33px;
  max-width: 980px;
  margin: 0 auto;
}
.icon-grid .ig-sec-heading.text-shadow h2,
.icon-grid .ig-sec-heading.text-shadow p {
  text-shadow: 0px 2px 2px rgba(158, 158, 158, 0.4705882353);
}
@media (min-width: 768px) {
  .icon-grid .ig-card {
    row-gap: 5rem;
    justify-content: center;
  }
}
@media (max-width: 767px) {
  .icon-grid .ig-card {
    flex-wrap: nowrap;
    margin: 0;
  }
}
.icon-grid .ig-imgwrap {
  margin-bottom: 2rem;
  display: inline-flex;
  width: 3.13rem;
  height: 3.13rem;
}
.icon-grid .ig-imgwrap img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.icon-grid .ig-detailwrap h5 {
  font-size: 20px;
  line-height: 27px;
  font-weight: 600;
}
.icon-grid .ig-detailwrap .ig-desc {
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 27px;
}
.icon-grid .ig-detailwrap .btn-link {
  display: inline-block;
  margin-top: 2.19rem;
}
.icon-grid .ig-slider-controls {
  display: none;
}
.icon-grid .ig-slider-controls:has(.swiper-pagination-bullets) {
  padding-bottom: 1px;
  margin-top: 5rem;
  display: block;
}
.icon-grid .ig-slider-controls .swiper-pagination {
  position: relative;
  left: unset;
  top: unset;
  bottom: unset;
}
.icon-grid .ig-item {
  padding-left: 3rem;
  padding-right: 3rem;
}
@media (max-width: 1199px) {
  .icon-grid .ig-item {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
@media (max-width: 767px) {
  .icon-grid .ig-item {
    text-align: center;
    padding: 0;
  }
}
.icon-grid.dark-mode {
  background: #fff;
}
@media (max-width: 767px) {
  .icon-grid.dark-mode {
    padding-bottom: 5rem;
  }
}
.icon-grid.dark-mode .ig-imgwrap {
  width: 100%;
  height: 4rem;
}
.icon-grid.dark-mode .ig-imgwrap img {
  max-width: 50%;
  margin: 0 auto;
}
.icon-grid .rc-cardwrap.left-aligned-icons .ig-imgwrap {
  width: -moz-fit-content;
  width: fit-content;
}
.icon-grid .rc-cardwrap.left-aligned-icons .ig-imgwrap img {
  max-width: 100%;
}