/**
 * Logo Carousel Block Styles
 *
 * Block: logo-carousel
 * Purpose: Displays a carousel of logos with smooth fade-in and
 *   directional slide animations. Supports alternating direction
 *   with gradient fade effects
 *
 * CSS Classes & BEM Structure:
 * - .logo-carousel: Main container with overflow control
 * - .lc-heading: Title and description section
 * - .lc-logowrap: Flex column container for carousel rows
 * - .lc-img-wrap: Logo image wrapper (170x50px responsive)
 * - .lc-wrap: Individual carousel row with animation and fade
 *     gradient overlay
 * - .has-background: Modifier for background color styling
 *
 * Responsive Breakpoints:
 * - md: Logo size reduced to 100x40px, margins adjusted
 * - lg: Row gap increased, logo width 130px
 * - xl: Logo width reduced to 130px
 *
 * Animations & Effects:
 * - AOS (Animate on Scroll): Rows animate from translateX
 *   (-500px or +500px) based on odd/even positioning
 * - Fade overlays: Pseudo-element ::before creates gradient fade
 *   (left fade for odd, right fade for even rows)
 * - Staggered delays: Uses SCSS @for loop to generate
 *   transition delays (max 2s delay)
 * - Overlay animation: Fade overlay moves from left/right edge
 *   to 100% offset on animation complete
 */
/*
 * 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 */
.logo-carousel {
  overflow: hidden;
}
.logo-carousel.has-background {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 2rem;
  padding-bottom: 4rem;
}
.logo-carousel.has-background h2 {
  color: #fff;
}
.logo-carousel.has-background .lc-wrap:nth-child(odd)::before {
  background: transparent !important;
}
.logo-carousel.has-background .lc-wrap:nth-child(even)::before {
  background: transparent !important;
}
.logo-carousel .lc-heading h2 {
  margin-bottom: 1.38rem;
}
.logo-carousel .lc-heading p {
  font-size: 1rem;
}
.logo-carousel .lc-logowrap {
  display: flex;
  flex-direction: column;
  row-gap: 1.88rem;
}
@media (max-width: 991px) {
  .logo-carousel .lc-logowrap {
    row-gap: 2.19rem;
  }
}
.logo-carousel .lc-img-wrap.logo-slider {
  position: relative;
  width: 10.63rem;
  height: 3.13rem;
  margin: 0 1.25rem;
}
@media (max-width: 1199px) {
  .logo-carousel .lc-img-wrap.logo-slider {
    width: 8.13rem;
  }
}
@media (max-width: 767px) {
  .logo-carousel .lc-img-wrap.logo-slider {
    width: 6.25rem;
    height: 2.5rem;
    margin: 0 0.63rem;
  }
}
.logo-carousel .lc-img-wrap.logo-slider img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.logo-carousel .lc-wrap {
  position: relative;
}
.logo-carousel .lc-wrap::before {
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  transition: 2s;
}
.logo-carousel .lc-wrap:nth-child(1)::before {
  transition-delay: 0.3s;
}
.logo-carousel .lc-wrap:nth-child(2)::before {
  transition-delay: 0.6s;
}
.logo-carousel .lc-wrap:nth-child(3)::before {
  transition-delay: 0.9s;
}
.logo-carousel .lc-wrap:nth-child(4)::before {
  transition-delay: 1.2s;
}
.logo-carousel .lc-wrap:nth-child(5)::before {
  transition-delay: 1.5s;
}
.logo-carousel .lc-wrap:nth-child(6)::before {
  transition-delay: 1.8s;
}
.logo-carousel .lc-wrap:nth-child(7)::before {
  transition-delay: 2s;
}
.logo-carousel .lc-wrap:nth-child(8)::before {
  transition-delay: 2s;
}
.logo-carousel .lc-wrap:nth-child(9)::before {
  transition-delay: 2s;
}
.logo-carousel .lc-wrap:nth-child(10)::before {
  transition-delay: 2s;
}
.logo-carousel .lc-wrap:nth-child(odd) {
  transition: 2s;
  transform: translateX(-500px);
}
.logo-carousel .lc-wrap:nth-child(odd).aos-animate {
  transform: translateX(0);
}
.logo-carousel .lc-wrap:nth-child(even) {
  transition: 2s;
  transform: translateX(500px);
}
.logo-carousel .lc-wrap:nth-child(even).aos-animate {
  transform: translateX(0);
}
.logo-carousel .lc-wrap:nth-child(odd)::before {
  left: 1px;
  background: linear-gradient(270deg, white 85%, rgba(9, 9, 121, 0) 100%);
}
.logo-carousel .lc-wrap:nth-child(even)::before {
  right: 1px;
  background: linear-gradient(90deg, white 85%, rgba(9, 9, 121, 0) 100%);
}
.logo-carousel .lc-wrap.aos-animate:nth-child(odd)::before {
  left: 100%;
}
.logo-carousel .lc-wrap.aos-animate:nth-child(even)::before {
  right: 100%;
}

.page-id-38625 .logo-carousel {
  padding-top: 3rem;
}