/*
 * Base Color Palette
 */
/**
 * Function to retrieve a color from the color map
 * @param {String} $key - The key of the color to retrieve
 * @return {Color} - The color corresponding to the key
 */
/* Body */
/**
 * Converts a pixel value to a viewport width (vw) value.
 *
 * This function takes a pixel value and converts it to a vw value based on a
 * reference width of 1920 pixels.
 *
 * @param {Number} $px - The pixel value to convert.
 * @return {String} - The calculated vw value.
 */
/**
 * Removes the unit from a value if it is unitless.
 *
 * @param {Number|String} $value - The value to strip the unit from.
 * @return {Number} - The value without its unit.
 */
/**
 * Rounds a value to a specified number of decimal places.
 *
 * @param {Number} $value - The value to round.
 * @param {Number} $places - The number of decimal places to round to. Default is 2.
 * @return {Number} - The rounded value.
 */
/**
 * Clamps a value between a minimum and maximum value, with a responsive calculation.
 *
 * @param {Number|String} $min - The minimum value.
 * @param {Number|String} $max - The maximum value.
 * @param {Number|String} $maxScreen - The maximum screen size for the calculation.
 * @return {String} - The clamped value with units.
 */
/**
 * Function to lighten a color by a given percentage
 * @param {Color} $color - The base color to be lightened
 * @param {Number} $percentage - The percentage by which to lighten the color
 * @return {Color} - The lightened color
 */
/**
 * Function to darken a color by a given percentage
 * @param {Color} $color - The base color to be darkened
 * @param {Number} $percentage - The percentage by which to darken the color
 * @return {Color} - The darkened color
 */
/**
 * Generates a transition property with a cubic-bezier timing function based on the given style.
 *
 * @param {String} $style - The style of the transition. Accepts 'smooth', 'drift', or 'wave'.
 * @return {String} - The transition property with the corresponding cubic-bezier timing function.
 */
/**
 * Generates a URL for an image located in the resources/images directory.
 *
 * @param {String} $name - The name of the image file.
 * @return {String} - The URL of the image.
 */
/* Navigation */
/* Footer */
/* Links */
/* Buttons */
/* Button Paddings */
/* Inputs */
/* Typography */
/*
 * TITLES
 *
 * This section defines the typography settings for various title elements.
 * It includes font families, font weights, line heights, padding, font sizes, and letter spacing.
 */
/*
 * Container & Grid
 */
/*
 * GRID SPACING
 */
/* Margins */
/*
 * Breakpoints
 */
/* Mobile menu enter */
/**
 * Mixin to convert pixel values to viewport width (vw) units
 * @param {Number|String} $width - The width in pixels or percentage to be converted to vw
 * @param {Number|String} $height - The height in pixels or auto to be converted to vw (default: auto)
 * @param {Boolean} $isImage - Whether the element is an image, applying object-fit: cover if true (default: false)
 * @param {Boolean} $important - Whether to add !important to the styles (default: true)
 */
/**
 * Mixin to create pseudo-elements with customizable properties
 * @param {String} $type - The type of pseudo-element (before, after, etc.)
 * @param {Boolean} $relative - Whether to set the position to relative
 * @param {Number} $z-index - The z-index of the pseudo-element
 * @param {String} $content - The content of the pseudo-element
 */
/**
 * Mixin for responsive design helper for applying styles based on screen width.
 *
 * This mixin allows you to apply styles conditionally based on the screen width.
 * You can specify a minimum width, a maximum width, or both.
 *
 * @param {Number|Boolean} $min - The minimum screen width (optional, default: false).
 * @param {Number|Boolean} $max - The maximum screen width (optional, default: false).
 *
 * @example
 * // Apply styles for screens wider than 600px
 * @include mQuery(600px) {
 *   // styles here
 * }
 *
 * @example
 * // Apply styles for screens narrower than 1200px
 * @include mQuery(false, 1200px) {
 *   // styles here
 * }
 *
 * @example
 * // Apply styles for screens between 600px and 1200px
 * @include mQuery(600px, 1200px) {
 *   // styles here
 * }
 */
/**
 * Mixin to set width and height properties
 * @param {Number} $width - The width value
 * @param {Number} $height - The height value
 */
/**
 * Mixin to apply a CSS property to a class and its important variant.
 *
 * This mixin generates two CSS rules:
 * 1. A rule for the specified class with the given property and value.
 * 2. A rule for the same class prefixed with 'i-' that applies the property with !important.
 *
 * @param {String} $class - The class name to which the property will be applied.
 * @param {String} $property - The CSS property to be applied.
 * @param {String} $value - The value of the CSS property.
 */
.content-header--projects {
  overflow: hidden;
}
@media (max-width: 991.98px) {
  .content-header--projects {
    padding-bottom: 100px;
    margin-bottom: -100px;
    position: relative;
  }
}
.content-header--projects .h1-home {
  line-height: 1.09;
}
.content-header--projects .h1-home .point {
  width: 16px;
  height: 16px;
  border-radius: 16px;
  background: linear-gradient(213deg, #00B451 9.97%, #010101 71.01%);
  display: inline-block;
  margin-left: -6px;
}
@media (max-width: 767.98px) {
  .content-header--projects .h1-home span:nth-child(1) {
    display: block;
  }
}
.content-header--projects .container {
  position: relative;
}
.content-header--projects .container .line-animation-inner {
  position: absolute;
  height: calc(100% + 62px);
  bottom: -2px;
}
.content-header--projects .container .line-animation-inner .line-animation-content {
  height: 100%;
  position: relative;
}
.content-header--projects .container .line-animation-inner .line-animation {
  height: 100%;
  transform: translateY(-100%);
}
.content-header--projects .container .line-animation-inner .line-animation.left {
  left: 0;
}
.content-header--projects .container .line-animation-inner .line-animation.right {
  right: 0;
}
@media (max-width: 991.98px) {
  .content-header--projects .grid.last div:nth-child(3) {
    order: 4;
  }
}
.content-header--projects .home-header-grid:not(.line-animation-inner) .text-title-animation .text-first-animation, .content-header--projects .home-header-grid:not(.line-animation-inner) .text-title-animation .text-third-animation {
  display: inline-block;
}
.content-header--projects .home-header-grid:not(.line-animation-inner) .text-title-animation .text-second-animation {
  display: inline-block;
}
.content-header--projects .home-header-grid:not(.line-animation-inner) > div:nth-child(5) .deco-etoile {
  position: absolute;
  top: 0;
  right: calc(100% - 30px);
  transform: translate(300%, 200%);
  z-index: -1;
}
@media (max-width: 991.98px) {
  .content-header--projects .home-header-grid:not(.line-animation-inner) > div:nth-child(1) {
    order: 3;
    padding-bottom: calc(100 / 1920 * 100vw);
  }
  .content-header--projects .home-header-grid:not(.line-animation-inner) > div:nth-child(2) {
    order: 2;
    margin-bottom: 45px;
  }
  .content-header--projects .home-header-grid:not(.line-animation-inner) > div:nth-child(3) {
    order: 1;
    margin-bottom: 45px;
  }
  .content-header--projects .home-header-grid:not(.line-animation-inner) > div:nth-child(3) .deco-etoile {
    right: initial;
    left: 0;
    top: initial;
    bottom: 0;
    z-index: 1;
  }
}
.content-header--projects .home-header-image-inner {
  height: 100%;
}
.content-header--projects .animation-inner {
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
}
.content-header--projects .animation-inner .image {
  opacity: 0;
}
.content-header--projects .home-header-image {
  width: 100%;
}
.content-header--projects .home-header-image-1 {
  clip-path: polygon(0 0, 100% 0, 100% 75%, 75% 100%, 0 100%);
}
.content-header--projects .home-header-image-1 .image {
  width: 100% !important;
  height: calc(380 / 19.2 * 1vw) !important;
  max-height: 380px !important;
  min-height: 133px !important;
  object-fit: cover !important;
}
.content-header--projects .home-header-image-2 .image {
  width: 100% !important;
  height: calc(480 / 19.2 * 1vw) !important;
  max-height: 480px !important;
  min-height: 168px !important;
  object-fit: cover !important;
}
.content-header--projects .home-header-image-3 .image {
  width: 100% !important;
  height: calc(330 / 19.2 * 1vw) !important;
  max-height: 330px !important;
  min-height: 115.5px !important;
  object-fit: cover !important;
}
.content-header--projects .home-header-image .image {
  transition: transform 0.3s;
}
.content-header--projects .home-header-image:hover .image.hover {
  transform: scale(1.1);
}
@media (max-width: 991.98px) {
  .content-header--projects .home-header-image-1 {
    display: flex;
    gap: 50px;
  }
  .content-header--projects .home-header-image-1 > a {
    position: relative;
    overflow: hidden;
    display: inline-block;
    width: 100%;
  }
  .content-header--projects .home-header-image-1 .image {
    width: 100% !important;
    height: calc(600 / 19.2 * 1vw) !important;
    max-height: 600px !important;
    min-height: 210px !important;
    object-fit: cover !important;
  }
  .content-header--projects .home-header-image-3 .image {
    width: 100% !important;
    height: calc(600 / 19.2 * 1vw) !important;
    max-height: 600px !important;
    min-height: 210px !important;
    object-fit: cover !important;
  }
}

/*# sourceMappingURL=header-projects.css.map */