/* ========================================
    DL CONSEIL - Custom CSS
    Design System Implementation
    ======================================== */

/* === 1. CSS CUSTOM PROPERTIES (DESIGN TOKENS) === */
:root {
  /* === COLORS === */
  /* Primary Dark */
  --color-cendre: #292929;
  --color-cendre-20: #3a3a3a;
  --color-cendre-30: #696969;

  /* Primary Light */
  --color-old-lace: #fff8ef;
  --color-platre: #f4f0ea;
  --color-sable: #e2d8cb;

  /* Accents */
  --color-pumpkin: #fa7124;
  --color-pumpkin-10: #ffe1d0;
  --color-veronica: #9849ff;
  --color-veronica-10: #e9d8ff;
  --color-green: #5fc85d;
  --color-green-10: #d7ffd6;

  /* === SEMANTIC COLORS === */
  --color-primary: var(--color-pumpkin);
  --color-primary-light: var(--color-pumpkin-10);
  --color-secondary: var(--color-veronica);
  --color-success: var(--color-green);
  --color-error: var(--color-pumpkin);

  --color-text-primary: var(--color-cendre);
  --color-text-secondary: var(--color-cendre-30);
  --color-text-inverse: var(--color-old-lace);

  --color-bg-light: var(--color-old-lace);
  --color-bg-lighter: var(--color-platre);
  --color-bg-dark: var(--color-cendre);
  --color-bg-darker: var(--color-cendre-20);

  /* === TYPOGRAPHY === */
  --font-primary: "articulat-cf", -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;

  /* Font Weights */
  --font-weight-regular: 400;
  --font-weight-semibold: 600;

  /* Letter Spacing */
  --letter-spacing-tight: -0.03em;

  /* === SPACING === */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;
  --spacing-4xl: 80px;
  --spacing-5xl: 96px;

  /* Section Paddings */
  --section-padding-sm: var(--spacing-2xl); /* 48px */
  --section-padding-md: var(--spacing-3xl); /* 64px */
  --section-padding-lg: var(--spacing-4xl); /* 80px */
  --section-padding-xl: var(--spacing-5xl); /* 96px */

  /* === BORDER RADIUS === */
  --radius-sm: 10px;
  --radius-md: 20px;
  --radius-lg: 50px;
  --radius-full: 9999px;

  /* === BREAKPOINTS === */
  --breakpoint-mobile: 320px;
  --breakpoint-tablet: 768px;
  --breakpoint-laptop: 1024px;
  --breakpoint-desktop: 1440px;
}
html {
  scroll-behavior: unset;
}
.no-container {
  max-width: 100%;
  width: 100%;
  height: 100%;
}
/* === 2. TYPOGRAPHY CLASSES === */

/* === HEADINGS === */

.h1,
h1,
.h1-articulat {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 16px;
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-tight);
}

.h2-main,
h2 {
  font-family: var(--font-display);
  font-size: clamp(50px, 50px, 80px);
  line-height: clamp(48px, 48px, 78px);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-tight);
  margin: 0;
}

.h2-main--italic {
  font-style: italic;
}

.h2-second {
  font-family: var(--font-display);
  font-size: clamp(45px, 7vw, 65px);
  line-height: clamp(43px, 7vw, 63px);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-tight);
}

.h3-main,
h3 {
  font-family: var(--font-display);
  font-size: 50px;
  line-height: 48px;
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-tight);
  margin: 0;
}
@media (min-width: 1023px) {
  .h3-main,
  h3 {
    font-size: 80px;
    line-height: 78px;
  }
}
.h3-second {
  font-family: var(--font-display);
  font-size: clamp(35px, 5vw, 50px);
  line-height: clamp(33px, 5vw, 48px);
  font-weight: var(--font-weight-regular);
  letter-spacing: -1.05px;
}

.h3-third {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 30px;
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-tight);
}

.h4-main,
h4 {
  font-family: var(--font-display);
  font-size: 50px;
  line-height: 48px;
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-tight);
  margin: 0;
}

.h4-main--italic {
  font-style: italic;
}

h5,
.h5,
h6,
.h6 {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 32px);
  line-height: clamp(22px, 2.8vw, 30px);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-tight);
  margin: 0;
}

/* === BODY TEXT === */
.paragraph,
p,
li,
ul {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 1;
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-tight);
  margin: 0;
  leading-trim: both;
  text-edge: cap;
}

.paragraph--bold,
body strong,
body b,
.page-content strong,
.page-content b,
article strong,
article b,
.strong {
  font-weight: var(--font-weight-semibold);
}

/* === NAVIGATION & UI === */
.menu-text {
  font-family: var(--font-primary);
  font-size: clamp(14px, 1.5vw, 16px);
  line-height: clamp(14px, 1.5vw, 16px);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-tight);
}

.menu-text--active {
  font-weight: var(--font-weight-semibold);
}

.btn-text {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 16px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.48px;
}

/* === 3. BUTTON SYSTEM === */
/* Inspired by: https://more-nutrition.webflow.io/ */
/* Animation: Icon-left fades, Text translates left + rotates, Icon-right (absolute) scales up */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: none;
  background: transparent;
  text-decoration: none;
  overflow: visible;
  position: relative;
  padding: 0;
}

/* Desktop: Show cursor pointer */
.is-desktop .btn {
  cursor: pointer;
}

/* Touch devices: Optimize touch interactions */
.is-touch .btn {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
  touch-action: manipulation;
}

/* Icon Left (icon1) - Shrinks and fades out */
.btn__icon-left {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 31px;
  height: 31px;
  border-radius: var(--radius-full);
  padding: 7px;
  flex-shrink: 0;
  transform-origin: center;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.3s ease;
  opacity: 1;
}

/* Text container - Translates left to fill icon-left space + rotates */
.btn__text {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 12px 7px 12px;
  min-height: 34px;
  border-radius: var(--radius-lg);
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 1.14;
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-tight);
  transform-origin: center;
  white-space: nowrap;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Icon Right (icon2) - ABSOLUTE positioned, scales from 0 */
.btn__icon-right {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%) scale(0);
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 31px;
  height: 31px;
  border-radius: var(--radius-full);
  padding: 7px;
  transform-origin: center;
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* .btn__icon-right img {
    width: 17.5px;
    height: auto;
  } */

/* Color Variants */
.btn--oldlace .btn__icon-left,
.btn--oldlace .btn__icon-right {
  background-color: var(--color-old-lace);
  color: var(--color-cendre);
}

.btn--oldlace .btn__text {
  background-color: var(--color-old-lace);
  color: var(--color-cendre);
}

.btn--cendre20 .btn__icon-left,
.btn--cendre20 .btn__icon-right {
  background-color: var(--color-cendre-20);
  color: var(--color-old-lace);
}

.btn--cendre20 .btn__text {
  background-color: var(--color-cendre-20);
  color: var(--color-old-lace);
}

/* Hover/Active State Animation */
/* Only apply hover animations on devices with true hover capability (desktop/mouse) */
/* This prevents the "double-tap" issue on mobile/touch devices */
@media (hover: hover) and (pointer: fine) {
  /* Icon-left: Shrinks and fades */
  .btn:hover .btn__icon-left {
    transform: scale(0);
    opacity: 0;
  }

  /* Text: Translates left (to fill icon-left space) + rotates */
  .btn:hover .btn__text {
    transform: translateX(-31px) rotate(-5deg);
  }

  /* Icon-right: Scales up from absolute position */
  .btn:hover .btn__icon-right {
    transform: translateY(-50%) scale(1);
    opacity: 1;
  }
}

/* Active state - Only for desktop/non-touch devices */
/* Touch devices skip :active animations to prevent click blocking */
.is-desktop .btn:active .btn__icon-left {
  transform: scale(0);
  opacity: 0;
}

.is-desktop .btn:active .btn__text {
  transform: translateX(-31px) rotate(-5deg);
}

.is-desktop .btn:active .btn__icon-right {
  transform: translateY(-50%) scale(1);
  opacity: 1;
}

/* Touch devices: Simple opacity feedback on tap (no transform) */
.is-touch .btn:active {
  opacity: 0.8;
  transition: opacity 0.15s ease;
}

/* Button Type Modifiers (for specific icons/positioning) */
.btn--call .btn__icon-left,
.btn--call .btn__icon-right {
  padding: 7px 7px 6px;
}

.btn--message .btn__icon-left,
.btn--message .btn__icon-right {
  padding: 5px 7px 6px 8px;
}

.btn--form .btn__icon-left,
.btn--form .btn__icon-right {
  padding: 7px;
}

.btn--linkedin .btn__icon-left,
.btn--linkedin .btn__icon-right {
  padding: 7px;
}

/* Button Groups */
.btn-group {
  display: flex;
  gap: var(--spacing-md);
  flex-wrap: wrap;
  align-items: center;
}

/* === 4. FORM SYSTEM === */

.form-group {
  margin-bottom: var(--spacing-lg);
}

.form-group--message {
  margin-bottom: var(--spacing-xl);
}

.form-label {
  display: block;
  margin-bottom: var(--spacing-sm);
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 16px;
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-primary);
}

.form-control {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--color-cendre-20);
  border-radius: var(--radius-sm);
  background-color: var(--color-bg-dark);
  color: var(--color-old-lace);
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 16px;
  letter-spacing: var(--letter-spacing-tight);
  transition: all 0.2s ease;
}

.form-control::placeholder {
  color: var(--color-old-lace);
  opacity: 0.6;
}

/* Focus State (selected) */
.form-control:focus {
  outline: none;
  border-color: var(--color-pumpkin);
}

/* Disabled State */
.form-control:disabled {
  background-color: var(--color-cendre-30);
  color: dimgrey;
  cursor: not-allowed;
  opacity: 0.6;
}

/* Error State */
.form-control.has-error,
.form-control.error {
  border-color: var(--color-pumpkin);
  color: var(--color-pumpkin);
}

/* Select Dropdown */
.form-control--select {
  appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg width="8" height="9" viewBox="0 0 8 9" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 9L0 5L8 5L4 9Z" fill="%23FFF8EF"/></svg>');
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}

/* Textarea */
.form-control--textarea {
  min-height: 120px;
  resize: vertical;
}

.form-error {
  display: none;
  margin-top: var(--spacing-sm);
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 16px;
  color: var(--color-pumpkin);
}

.has-error .form-error,
.error .form-error {
  display: block;
}

.form-success {
  padding: var(--spacing-md);
  border-radius: var(--radius-sm);
  background-color: var(--color-green-10);
  color: var(--color-cendre);
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 16px;
}

/* === RSFORM PRO STYLING === */
/* Based on Figma design: https://www.figma.com/design/gBT7039zCKhuCX7VnuTDyo (node-id=1168-4773) */

.formContainer {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
/* Form field wrapper */
.formContainer .rsform-block {
  margin-bottom: 0;
}

/* Input fields styling */
.formContainer input[type="text"],
.formContainer input[type="email"],
.formContainer input[type="tel"],
.formContainer textarea {
  width: 100%;
  background-color: var(--color-cendre-20);
  border: none;
  border-radius: 4px;
  padding: 10px 11px 10px 11px;
  color: var(--color-old-lace);
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 16px;
  letter-spacing: -0.48px;
  transition: all 0.2s ease;
}

.formContainer input[type="text"]::placeholder,
.formContainer input[type="email"]::placeholder,
.formContainer input[type="tel"]::placeholder,
.formContainer textarea::placeholder {
  color: var(--color-old-lace);
  opacity: 1;
}
.formControls {
  width: 100%;
  padding: 0;
}
.formContainer input[type="text"]:focus,
.formContainer input[type="email"]:focus,
.formContainer input[type="tel"]:focus,
.formContainer textarea:focus {
  outline: none;
  background-color: #4a4a4a;
}

/* Textarea specific height */
.formContainer textarea {
  min-height: 101px;
  resize: vertical;
}

/* Row layout adjustments */
.formContainer .row {
  display: flex;
  gap: 5px;
  margin: 0;
}
.formContainer .col-md-6 {
  flex: 1;
}
.formContainer .row .col-md-6,
.formContainer .row .col-md-12 {
  padding: 0;
}

/* Checkbox styling */
.formContainer input[type="checkbox"] {
  appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid var(--color-sable);
  border-radius: 8px;
  background-color: transparent;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.formContainer input[type="checkbox"]:checked {
  background-color: var(--color-pumpkin);
  position: relative;
}

.formContainer .rsform-block-request-consent {
  margin: 13px 0;
}
/* Checkbox group layout */
.formContainer .rsform-block-request-consent .formControls {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.formContainer .rsform-block-request-consent label {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 16px;
  letter-spacing: -0.48px;
  color: var(--color-sable);
  margin: 0;
}

/* Button wrapper */
.formContainer .rsform-block-send .formControls {
  display: flex;
  align-items: center;
}

/* Validation messages */
.formContainer .formValidation {
  color: var(--color-pumpkin);
  font-family: var(--font-primary);
  font-size: 14px;
  line-height: 16px;
  margin-top: 5px;
}

/* Responsive adjustments */
@media (max-width: 767px) {
  .formContainer .row {
    flex-direction: column;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  #userForm .formContainer .row {
    flex-direction: column;
  }
  #userForm .formContainer .col-md-6 {
    width: 100%;
  }
}
label:empty {
  display: none;
}
#userForm .formContainer > .row:nth-child(3) .col-md-12 {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
/* === 6. UTILITY CLASSES === */

/* Spacing Utilities */
.spacing-xs {
  margin-bottom: var(--spacing-xs);
}
.spacing-sm {
  margin-bottom: var(--spacing-sm);
}
.spacing-md {
  margin-bottom: var(--spacing-md);
}
.spacing-lg {
  margin-bottom: var(--spacing-lg);
}
.spacing-xl {
  margin-bottom: var(--spacing-xl);
}
.spacing-2xl {
  margin-bottom: var(--spacing-2xl);
}
.spacing-3xl {
  margin-bottom: var(--spacing-3xl);
}

/* Text Utilities */
.text-pumpkin {
  color: var(--color-pumpkin);
}
.text-veronica {
  color: var(--color-veronica);
}
.text-sable {
  color: var(--color-sable);
}
.text-old-lace {
  color: var(--color-old-lace);
}
.text-cendre {
  color: var(--color-cendre);
}
.text-cendre-30 {
  color: var(--color-cendre-30);
}
.text-platre {
  color: var(--color-platre);
}
.text-green {
  color: var(--color-green);
}
.text-green-10 {
  color: var(--color-green-10);
}
.text-veronica {
  color: var(--color-veronica);
}
.text-veronica-10 {
  color: var(--color-veronica-10);
}
.text-pumpkin {
  color: var(--color-pumpkin);
}
.text-pumpkin-10 {
  color: var(--color-pumpkin-10);
}
/* Background Utilities */
.bg-light {
  background-color: var(--color-old-lace);
}
.bg-lighter {
  background-color: var(--color-platre);
}
.bg-dark {
  background-color: var(--color-cendre);
}
.bg-darker {
  background-color: var(--color-cendre-20);
}
.bg-accent {
  background-color: var(--color-pumpkin);
}
/*Hover text*/
.hover.hover-pumpkin:hover {
  color: var(--color-pumpkin) !important;
}
.hover.hover-green:hover {
  color: var(--color-green) !important;
}
.hover.hover-veronica:hover {
  color: var(--color-veronica) !important;
}
.hover {
  transition: all 500ms ease-in-out;
}
/* === 7. RESPONSIVE UTILITIES === */

/* Hide on mobile */
@media (max-width: 767px) {
  .hide-mobile {
    display: none !important;
  }
}

/* Hide on tablet and up */
@media (min-width: 768px) {
  .hide-tablet-up {
    display: none !important;
  }
}

/* Hide on laptop and up */
@media (min-width: 1024px) {
  .hide-laptop-up {
    display: none !important;
  }
}

/* Show only on mobile */
.show-mobile {
  display: none !important;
}

@media (max-width: 767px) {
  .show-mobile {
    display: block !important;
  }
}

/* === 8. GRID SYSTEM === */

.container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 calc(var(--spacing-md) * -1);
}

.col {
  flex: 1;
  padding: 0 var(--spacing-md);
}

.col-12 {
  width: 100%;
  padding: 0 var(--spacing-md);
}
.col-6 {
  width: 50%;
  padding: 0 var(--spacing-md);
}
.col-4 {
  width: 33.333%;
  padding: 0 var(--spacing-md);
}
.col-3 {
  width: 25%;
  padding: 0 var(--spacing-md);
}

/* Responsive columns - stack on mobile */
@media (max-width: 767px) {
  .col-6,
  .col-4,
  .col-3 {
    width: 100%;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .col-4,
  .col-3 {
    width: 50%;
  }
}

/* === 9. CARD COMPONENT === */

.card {
  background-color: var(--color-old-lace);
  border-radius: var(--radius-md);
  padding: var(--spacing-xl);
}

.card--dark {
  background-color: var(--color-cendre);
  color: var(--color-old-lace);
}

.card__title {
  margin-bottom: var(--spacing-md);
}

.card__content {
  margin-bottom: var(--spacing-lg);
}
/* Person card*/
.person-card {
  width: max-content;
  border: none;
  display: flex;
  flex-direction: row;
  gap: 20px;
  padding: 3px 19px 3px 3px;
  min-height: 65px;
  border-radius: 5px;
}
.person-card img {
  border-radius: 5px;
}
.person-card ul {
  font-family: var(--font-primary);
  font-size: 14px;
  font-style: normal;
  white-space: nowrap;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: -0.42px;
  padding: 0;
  margin: 0;
}
.person-card .card-title,
.person-card .card-title > * {
  font-weight: var(--font-weight-semibold);
  margin: 0;
}
.person-card .card__content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  justify-content: center;
  margin: 0;
}
.person-card li {
  list-style: none;
}
.person-card li::before {
  content: "";
  width: 7px;
  height: 7px;
  display: inline-block;
  margin-right: 5px;
  background-color: var(--color-veronica);
  border-radius: 100%;
}

/* === 10. NAVIGATION === */

.nav {
  display: flex;
  gap: var(--spacing-lg);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__item {
  margin: 0;
}

.nav__link {
  font-family: var(--font-primary);
  font-size: clamp(14px, 1.5vw, 16px);
  line-height: clamp(14px, 1.5vw, 16px);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-cendre);
  text-decoration: none;
  transition: color 0.2s ease;
}

/* .nav__link:hover,
  .nav__link--active {
    font-weight: var(--font-weight-semibold);
    color: var(--color-pumpkin);
  } */

/* Mobile Navigation */
@media (max-width: 767px) {
  .nav {
    flex-direction: column;
    gap: var(--spacing-md);
  }
}

/* === 11. HIGHLIGHT TEXT WITH COLOR ANIMATION === */

/* Dark badge/highlight variant (for static dark background) */
.highlight-dark {
  position: relative;
  display: inline-block;
  padding: 4px 10px;
  font-family: var(--font-display);
  font-style: normal;
  color: var(--color-old-lace);
  line-height: 1;
  /* Text giữ nguyên thẳng */
}

/* Pseudo-element cho background skew */
.highlight-dark::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  background-color: var(--color-cendre);
  transform: skewX(-10deg);
  transition: transform 0.3s ease;
}

/* Color animation keyframes: Smooth continuous transitions
    Green → Green-Purple blend → Purple → Purple-Orange blend → Orange → Orange-Green blend → Green */
@keyframes highlightColorChange {
  0% {
    background-color: #5fc85d; /* Green */
  }
  16.67% {
    background-color: #77ce7e; /* Green → Purple transition (1/2) */
  }
  25% {
    background-color: #8bac99; /* Green → Purple transition (2/2) */
  }
  33.33% {
    background-color: #9849ff; /* Purple (Veronica) */
  }
  41.67% {
    background-color: #b54fdb; /* Purple → Orange transition (1/2) */
  }
  50% {
    background-color: #ca5d92; /* Purple → Orange transition (2/2) */
  }
  66.67% {
    background-color: #fa7124; /* Orange (Pumpkin) */
  }
  75% {
    background-color: #d78f45; /* Orange → Green transition (1/2) */
  }
  83.33% {
    background-color: #9cac4f; /* Orange → Green transition (2/2) */
  }
  100% {
    background-color: #5fc85d; /* Back to Green */
  }
}

/* Variant: Faster animation */
.highlight--fast {
  animation-duration: 4s;
}

/* Variant: Slower animation */
.highlight--slow {
  animation-duration: 9s;
}

/* Variant: No skew transform */
.highlight--straight {
  transform: skewX(0deg);
}

.highlight--straight:hover {
  transform: skewX(0deg) scale(1.05);
}

/* Pause animation on hover (optional) */
.highlight--pause-on-hover:hover {
  animation-play-state: paused;
}

.hero-section__title--pc .highlight::after {
  margin-left: -18px;
  width: 120%;
}

@media (max-width: 767.9px) {
  .hero-section__title--mobile .highlight::after {
    width: 110%;
  }
}

.section-hero__heading {
  width: 236px;
}

@media (min-width: 768px) {
  .section-hero__heading {
    width: 100%;
  }
}

.section-introduction__title .highlight::after {
  width: 104%;
  height: 99%;
  transform: skew(-20deg);
}

@media (min-width: 768px) {
  .section-introduction__title .highlight::after {
    margin-left: -5px;
    width: 109%;
    height: 104%;
    transform: skew(-20deg);
  }
}

.section-introduction__description {
  width: 100%;
}

@media (min-width: 768px) {
  .section-introduction__description {
    width: 508px;
  }
}

.service-card__title .highlight-dark::after {
  margin-top: 9px;
  transform: skew(-19deg);
}

.service-card__title-wrapper--desktop .highlight-dark::after {
  margin-left: -10px;
  width: 110%;
  height: 80%;
  transform: skew(-15deg);
}

.section-conseiller__description .sppb-addon-content {
  width: 100%;
}

@media (min-width: 1440px) {
  .section-conseiller__description .sppb-addon-content {
    width: 498px;
  }
}
.section-conseiller #sppb-addon-wrapper-1760694782321 .btn {
  cursor: unset;
}
/*========SECTION HERO ========*/
.section-hero {
  background-color: var(--color-platre);
}
.section-hero .sppb-row-container {
  max-width: 100%;
  width: 100%;
  height: 100%;
}
.section-hero #column-id-5983e9c1-2693-47d7-a916-4ee4b9fe5a55 {
  width: 325px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .section-hero #column-id-5983e9c1-2693-47d7-a916-4ee4b9fe5a55 {
    width: 529px;
  }
}
@media (min-width: 1023px) {
  .section-hero #column-id-5983e9c1-2693-47d7-a916-4ee4b9fe5a55 {
    width: 647px;
  }
}
/*Section Hero CTA absolute*/
#column-wrap-id-5983e9c1-2693-47d7-a916-4ee4b9fe5a55 {
  height: calc(100vh - env(safe-area-inset-top));
}
#column-wrap-id-5983e9c1-2693-47d7-a916-4ee4b9fe5a55 .sppb-column-addons {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#sppb-addon-wrapper-f06319bc-d40a-45f0-9103-8135f0b756f2 {
  position: absolute;
  bottom: 115px;
  left: 50%;
  transform: translateX(-50%);
}
@media (min-width: 1023px) {
  #sppb-addon-wrapper-f06319bc-d40a-45f0-9103-8135f0b756f2 {
    bottom: 20px;
  }
}
/*========================================*/
.section-hero .sppb-row-container .sppb-row {
  height: 100%;
  align-items: center;
}

/*======== BG-CENDRE ========*/
#sp-footer,
.bg-cendre {
  background-color: var(--color-cendre);
  background-image: url(/files/bg/bg-cendre/bg-cendre-dl-mob.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top left; /* Starting position for GSAP parallax */
  /* background-attachment: fixed; REMOVED - causes iOS Safari issues */
  border-radius: 10px;
}
@media (min-width: 768px) {
  #sp-footer,
  .bg-cendre {
    background-image: url(/files/bg/bg-cendre/bg-cendre-dl-tab.svg);
  }
}
@media (min-width: 1024px) {
  #sp-footer,
  .bg-cendre {
    background-size: initial;
    background-image: url(/files/bg/bg-cendre/bg-cendre-dl-pc.svg);
  }
}
/*SECTION SERVICE - CONSEILLER STRATEGIQUE*/

/* Grid Container */
.services-grid-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 40px;
  padding: 0;
  margin: 0;
}

@media (min-width: 768px) {
  .services-grid-wrapper {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }
}

@media (min-width: 1024px) {
  .services-grid-wrapper {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
  }
}

/* Service Card Base */
.service-card {
  position: relative;
  display: flex;
  flex-direction: column-reverse;
  border-radius: 10px;
  overflow: hidden;
  padding: 48px 35px 40px 30px;
  max-width: 342px;
  max-height: 785px;
  height: 100%;
  justify-content: space-between;
}
.service-card__media {
  align-self: flex-start;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 246px;
}

/* Photo principale - Image en haut */
.service-card__image--photo {
  position: relative;
  width: 100%;
  z-index: 1;
}

.service-card__image--photo img {
  /*All the service card photo will have 174x184 size in mobile size*/
  width: 174px;
  height: 184px;
  border-radius: 10px;
  display: block;
}

/* Illustration - Position absolute pour overlap */
.service-card__image--illustration {
  position: absolute;
  top: 53px;
  right: 0;
  z-index: 2;
}

.service-card__image--illustration img {
  width: 100%;
  height: auto;
  display: block;
}
@media (min-width: 768px) {
  .service-card {
    flex-direction: row;
    max-height: 503px;
    max-width: 668px;
    padding: 0px 50px 0px 30px;
  }

  /* Tablet: Ajustement des images */
  .service-card__media {
    align-self: center;
    width: 262px;
  }

  .service-card__image--photo img {
    width: 230px;
    height: 240px;
  }

  .service-card__image--illustration {
    top: 86px;
    right: 0;
  }
}

@media (min-width: 1024px) {
  .service-card {
    min-height: 607px;
    padding: 70px 60px 50px 50px;
    max-width: 1224px;
    width: 100%;
  }

  /* Desktop: Images plus grandes avec overlap */
  .service-card__media {
    align-self: flex-start;
    width: 484px;
  }

  .service-card__image--photo img {
    width: 341px;
    height: 363px;
  }

  .service-card__image--illustration {
    top: 108px;
    right: 0;
  }
}

/* Color Variants */
.service-card--veronica {
  background-color: var(--color-veronica);
  color: #fff8ef;
}

.service-card--pumpkin {
  background-color: var(--color-pumpkin);
  color: #fff8ef;
}

.service-card--green {
  background-color: var(--color-green);
  color: #fff8ef;
}

/* Individual Card Illustration Widths */
/* Card 1 */
.card-1 .service-card__image--illustration {
  width: 185px;
}

/* Card 2 */
.card-2 .service-card__image--illustration {
  width: 150px;
}

/* Card 3 */
.card-3 .service-card__image--illustration {
  width: 176px;
}

/* Card 4 */
.card-4 .service-card__image--illustration {
  width: 213px;
}

/* Card 5 */
.card-5 .service-card__image--illustration {
  width: 180px;
}

/* Card 6 */
.card-6 .service-card__image--illustration {
  width: 135px;
}

@media (min-width: 768px) {
  /* Card 1 - Tablet */
  .card-1 .service-card__image--illustration {
    width: 246px;
  }

  /* Card 2 - Tablet */
  .card-2 .service-card__image--illustration {
    width: 199px;
  }

  /* Card 3 - Tablet */
  .card-3 .service-card__image--illustration {
    width: 233px;
  }

  /* Card 4 - Tablet */
  .card-4 .service-card__image--illustration {
    width: 282px;
  }

  /* Card 5 - Tablet */
  .card-5 .service-card__image--illustration {
    width: 238px;
  }

  /* Card 6 - Tablet */
  .card-6 .service-card__image--illustration {
    width: 179px;
  }
}

@media (min-width: 1024px) {
  /* Card 1 - Desktop */
  .card-1 .service-card__image--illustration {
    width: 364px;
  }

  /* Card 2 - Desktop */
  .card-2 .service-card__image--illustration {
    width: 294px;
  }

  /* Card 3 - Desktop */
  .card-3 .service-card__image--illustration {
    width: 344px;
  }

  /* Card 4 - Desktop */
  .card-4 .service-card__image--illustration {
    width: 419px;
  }

  /* Card 5 - Desktop */
  .card-5 .service-card__image--illustration {
    width: 352px;
  }

  /* Card 6 - Desktop */
  .card-6 .service-card__image--illustration {
    width: 265px;
  }
}

/* Badge Component */
.service-card__badge {
  position: absolute;
  display: none;
  top: 20px;
  left: 20px;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background-color: #f4f0ea;
  border-radius: 50px;
  z-index: 10;
  max-width: calc(100% - 40px);
}
@media (min-width: 1023px) {
  .service-card__badge {
    display: inline-flex;
  }
}
.badge__indicator {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--color-veronica);
  flex-shrink: 0;
}

.badge__indicator--green {
  background-color: var(--color-green);
}

.badge__indicator--pumpkin {
  background-color: var(--color-pumpkin);
}

.badge__text {
  font-family: "Articulat CF", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, sans-serif;
  font-size: 14px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #292929;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.services-slider-container .btn__icon-left,
.services-slider-container .btn__icon-right {
  display: none;
}
.services-slider-container .btn__text {
  white-space: normal;
  text-align: left;
}
@media (max-width: 1023px) {
  .services-slider-container .btn__text {
    font-size: 14px;
    text-align: left;
    padding: 7px 10px 7px 10px;
  }
}
@media (min-width: 768px) {
  .badge__text {
    font-size: 16px;
    white-space: normal;
  }
}
@media (min-width: 1023px) {
  .services-slider-container .btn__icon-left,
  .services-slider-container .btn__icon-right {
    display: inline-flex;
  }
  .services-slider-container .btn__text {
    white-space: nowrap;
  }
}
/* Background Decoration */
.service-card__bg-decoration {
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  background-image: url(/files/2025/10/24/bg-service-mobile.svg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: auto;
}
.mission-panel__bg-decoration {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  background-image: url("/files/2025/10/22/mission-card-bg-decoration-mobile.svg");
  background-position: top;
  background-repeat: no-repeat;
  background-size: auto;
}
@media (min-width: 768px) {
  .service-card__bg-decoration {
    background-image: url(/files/2025/10/22/bg-service-card-tablet.svg);
    width: 50%;
    background-position: left center;
  }
  .mission-panel__bg-decoration {
    background-image: url(/files/2025/10/22/mission-card-bg-decoration-tablet.svg);
  }
}

@media (min-width: 1023px) {
  .service-card__bg-decoration {
    background-image: url(/files/2025/10/24/bg-service-card.svg);
  }
  .mission-panel__bg-decoration {
    background-image: url("/files/2025/10/19/mission-card-bg-decoration.svg");
    width: 50%;
  }
}
/* Content Area */
.service-card__content {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  max-width: 282px;
  justify-content: flex-end;
  width: 100%;
}
.service-card__title {
  line-height: 48px;
  letter-spacing: -1.5px;
  font-size: 50px;
}
@media (min-width: 1023px) {
  .service-card__content {
    max-width: 562px;
    justify-content: flex-end;
  }
  .service-card__title {
    line-height: 78px;
    letter-spacing: -2.4px;
    font-size: 80px;
  }
}
/* Title Section */
.service-card__title-wrapper {
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  align-items: start;
}

.title-highlight {
  display: none;
  grid-area: 1 / 1;
  align-self: start;
  justify-self: end;
  width: 180px;
  height: 60px;
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  margin-right: -20px;
  margin-top: 8px;
}

@media (min-width: 768px) {
  .title-highlight {
    display: block;
    width: 220px;
    height: 76px;
  }
}

/* Description Section */
.service-card__description {
  max-width: 100%;
  margin: 30px 0 20px 0;
}

@media (min-width: 768px) {
  .service-card__description {
    max-width: 406px;
    margin: 20px 0 30px 0;
  }
}
@media (min-width: 1023px) {
  .service-card__description {
    margin: 40px 0;
  }
}

/* Benefits List */
.service-card__benefits {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-width: 100%;
}
.service-card__benefits .btn {
  width: fit-content;
  cursor: default;
}

@media (min-width: 768px) {
  .service-card__benefits {
    max-width: 406px;
  }
}

.benefit-item {
  display: flex;
  align-items: center;
  gap: 0;
}

.benefit-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 31px;
  height: 31px;
  background-color: #fff8ef;
  border-radius: 50px;
  padding: 7px;
  flex-shrink: 0;
  box-sizing: border-box;
}

.benefit-item__icon img {
  width: 14px;
  height: 18px;
  object-fit: contain;
}

.benefit-item__text {
  display: inline-flex;
  align-items: center;
  padding: 10px 12px;
  background-color: #fff8ef;
  border-radius: 20px;
  font-family: var(--font-primary);
  font-size: 14px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-cendre);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 31px);
}

@media (min-width: 768px) {
  .benefit-item__text {
    font-size: 16px;
    padding: 10px 16px;
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .service-card,
  .benefit-item {
    transition: none;
  }

  .service-card:hover {
    transform: none;
  }

  .benefit-item:hover {
    transform: none;
  }
}

/* Print Styles */
@media print {
  .service-card {
    page-break-inside: avoid;
    box-shadow: none;
    border: 1px solid #ccc;
  }

  .service-card__bg-decoration {
    display: none;
  }

  .service-card__illustration {
    display: none;
  }
}

/* Description paragraphes spacing */
.conseiller-description p {
  margin-bottom: var(--spacing-md);
}

.conseiller-description p:last-child {
  margin-bottom: 0;
}
.section-conseiller,
.section-expertise {
  background-color: var(--color-platre);
}
/*SECTION CONSEILLER*/
.section-conseiller .sppb-row {
  max-width: 1440px;
  margin: 0 auto;
}

.section-conseiller-image--wrapper .btn-group {
  position: absolute;
  bottom: 15px;
  left: 20px;
  z-index: 3;
}
.section-conseiller-image--wrapper {
  position: relative;
}

.section-conseiller-image--wrapper .photo-wrapper {
  position: relative;
  width: 480px;
  max-width: 100%;
}
.photo-base {
  width: 100%;
  height: auto;
  border-radius: 12px;
  object-fit: cover;
  position: relative;
  z-index: 1;
}

.photo-overlay {
  position: absolute;
  width: 517px;
  height: 517px;
  max-width: 517px;
  z-index: 2;
  bottom: -70px;
  right: -250px;
}
@media (min-width: 768px) {
  .photo-overlay {
    width: 442px;
    height: 442px;
    max-width: 442px;
  }
}
@media (min-width: 1023px) {
  .photo-overlay {
    width: 730px;
    height: 730px;
    max-width: 730px;
  }
}
.section-conseiller-content-wrapper {
  max-width: 342px;
  width: 342px;
}
.section-conseiller-content-wrapper .sppb-addon-text-block p {
  margin-bottom: 15px;
}
.section-conseiller-content-wrapper .btn__text {
  font-size: 14px;
}
@media (min-width: 768px) {
  .photo-overlay {
    bottom: 0;
    right: -120px;
    height: 445px;
    width: 445px;
    max-width: 445px;
  }
}
@media (min-width: 1200px) {
  .section-conseiller-content-wrapper .btn__text {
    font-size: 16px;
  }
  .section-conseiller-content-wrapper {
    max-width: 567px;
    width: 567px;
  }
  .photo-overlay {
    bottom: -140px;
    right: -380px;
    height: 730px;
    width: 730px;
    max-width: 730px;
  }
}
/* SECTION EXPERTISE*/
.section-expertise .sppb-addon-single-image-container {
  width: 100%;
}
.section-expertise img {
  width: 100%;
}
@media screen {
}
.section-expertise .sppb-row.sppb-nested-row .sppb-row-column .sppb-div-addon {
  min-height: 520px;
}
/* Tablet LAYOUT*/
@media (min-width: 768px) and (max-width: 1023px) {
  .section-expertise
    .sppb-row.sppb-nested-row
    .sppb-row-column
    .sppb-div-addon {
    min-height: 151px;
    height: 151px;
    max-width: 535px;

    margin: 0 auto;
  }
  /*Image 1*/
  #sppb-addon-74b4d6f2-7bbb-4272-b564-ee6e0ec5bb20
    .sppb-addon-single-image-container
    img {
    width: 168px;
    max-width: 168px;
    height: 160px;
  }
  /*Image 2*/
  #sppb-addon-4d738696-c86f-441f-a615-2ea0f514846b
    .sppb-addon-single-image-container
    img {
    width: 138px;
    height: 155px;
    max-width: 138px;
  }
  /*Image 3*/
  #sppb-addon-7988a51b-cf8e-40f9-8089-f710995c9340
    .sppb-addon-single-image-container
    img {
    width: 101px;
    height: 155px;
    max-width: 101px;
  }
  /*Item 2,item3 text container*/

  #sppb-addon-wrapper-87ec486a-bbc4-4162-b64c-99e62da0495a,
  #sppb-addon-wrapper-9b22f216-a4f3-4fea-b377-be654ace3438 {
    align-self: flex-end;
  }
}
/*Mobile layout*/
@media (max-width: 767px) {
  .section-expertise
    .sppb-row.sppb-nested-row
    .sppb-row-column
    .sppb-div-addon {
    min-height: 275px;
    height: 275px;
    max-width: 340px;
  }
  /*Image 1*/
  #sppb-addon-74b4d6f2-7bbb-4272-b564-ee6e0ec5bb20
    .sppb-addon-single-image-container
    img {
    width: 193px;
    height: 184px;
  }
  /*Image 2*/
  #sppb-addon-4d738696-c86f-441f-a615-2ea0f514846b
    .sppb-addon-single-image-container
    img {
    width: 164px;
    height: 184px;
    object-fit: cover;
    object-position: left;
  }
  /*Image 3*/
  #sppb-addon-7988a51b-cf8e-40f9-8089-f710995c9340
    .sppb-addon-single-image-container
    img {
    width: 120px;
    height: 184px;
  }
}
/* === SECTION MISSION === */

.mission-main-text {
  width: 282px;
}
@media (min-width: 768px) {
  .mission-main-text {
    width: 381px;
  }
}
@media (min-width: 1023px) {
  .mission-main-text {
    width: 520px;
  }
}
/* === MARQUEE STATISTICS COMPONENT === */

.marquee-wrapper {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.marquee-track {
  display: flex;
  gap: 110px; /* Gap theo Figma */
  animation: marquee-scroll 60s linear infinite;
  will-change: transform;
}

/* Pause animation on hover (optional) */
.marquee-wrapper:hover .marquee-track {
  animation-play-state: paused;
}

.marquee-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.stat-content {
  display: flex;
  flex-direction: column;
  gap: 13px;
  align-items: flex-start;
}

/* Typography - Số/Tiêu đề lớn */
.stat-number.text-pumpkin,
.stat-number.text-veronica,
.stat-number.text-green,
.stat-number.text-old-lace {
  font-family: var(--font-display); /* Instrument Serif */
  font-size: 35px;
  line-height: 35px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.03em; /* -3% tracking = -1.05px */
  margin: 0;
  white-space: nowrap;
}

/* Typography - Mô tả nhỏ */
.stat-label {
  font-family: var(--font-primary); /* Articulat CF */
  font-size: 16px;
  line-height: 16px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.03em; /* -3% tracking = -0.48px */
  color: var(--color-old-lace);
  margin: 0;
  white-space: nowrap;
}

/* Logo ORDRE DES EXPERTS-COMPTABLES */
.ordre-logo {
  height: 27px;
  width: auto;
  display: block;
}

/* Keyframe animation - Scroll from right to left */
@keyframes marquee-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    /* Dịch chuyển đúng bằng 50% (6 items đầu) */
    transform: translateX(-50%);
  }
}

/* Responsive adjustments for marquee */
@media (max-width: 767px) {
  .marquee-track {
    gap: 60px; /* Giảm gap trên mobile */
  }

  .stat-number {
    font-size: 28px;
    line-height: 28px;
  }

  .ordre-logo {
    height: 20px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .marquee-track {
    gap: 80px;
  }

  .stat-number {
    font-size: 30px;
    line-height: 30px;
  }
}

/* === MARQUEE SERVICES CONTAINER === */
.services-marquee-container {
  width: 100%;
  overflow: hidden;
  background: transparent;
}

/* === SINGLE MARQUEE WRAPPER === */
.services-marquee-wrapper {
  display: flex;
  width: 100%;
  overflow: hidden;
  position: relative;
}

/* === MARQUEE TRACK (Animated) === */
.services-marquee-track {
  display: flex;
  align-items: center;
  animation: marquee-scroll 60s linear infinite;
  will-change: transform;
}

/* === MARQUEE ITEMS === */
.services-item {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  flex-shrink: 0;
  padding: 5px 12px 7px 12px;
  border-radius: 50px;
  background-color: var(--color-cendre-20);
}

/* === BULLET DOTS === */
.services-bullet {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.bullet-pumpkin {
  background: var(--color-pumpkin, #f59e0b);
}

.bullet-veronica {
  background: var(--color-veronica, #a855f7);
}

.bullet-green {
  background: var(--color-green);
}

.bullet-old-lace {
  background: var(--color-old-lace, #fdf8f3);
}

/* === SERVICE TEXT === */
.services-text {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.48px;
  color: var(--color-old-lace, #fdf8f3);
}

/* === ANIMATION === */
@keyframes marquee-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* === HOVER PAUSE === */
.services-marquee-track:hover {
  animation-play-state: paused;
}

/* ===================================================================
      MOBILE/TABLET: 2 ROWS - Rows chạy ngược nhau
      =================================================================== */
@media (max-width: 1024px) {
  /* Hide desktop single marquee */
  .services-marquee-desktop {
    display: none;
  }

  /* Show mobile double marquee */
  .services-marquee-mobile {
    display: block;
  }

  /* === MOBILE WRAPPER === */
  .services-marquee-mobile {
    display: flex;
    flex-direction: column;
    gap: 1px;
  }

  /* === ROW 1: Left to Right === */
  .services-marquee-row-1 .services-marquee-track {
    animation: marquee-scroll 40s linear infinite;
  }

  /* === ROW 2: Right to Left (Reverse) === */
  .services-marquee-row-2 .services-marquee-track {
    animation: marquee-scroll-reverse 40s linear infinite;
  }

  @keyframes marquee-scroll-reverse {
    0% {
      transform: translateX(-50%);
    }
    100% {
      transform: translateX(0);
    }
  }

  .services-item {
    gap: 10px;
  }

  .services-bullet {
    width: 6px;
    height: 6px;
  }
}

/* Desktop: Hide mobile version */
@media (min-width: 1025px) {
  .services-marquee-mobile {
    display: none;
  }

  .services-marquee-desktop {
    display: block;
  }
}

/* === TABS MISSION COMPONENT === */

.tabs-mission-wrapper {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* === TAB NAVIGATION - DESKTOP === */

.tabs-nav-desktop {
  display: flex;
  gap: 0;
  align-items: center;
  margin-bottom: var(--spacing-xl);
  flex-wrap: wrap;
}

.tab-button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 10px 10px;
  border: 1px solid var(--color-cendre-20);
  border-radius: var(--radius-full);
  background-color: var(--color-cendre);
  color: var(--color-old-lace);
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 16px;
  letter-spacing: var(--letter-spacing-tight);
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  margin-right: -1px; /* Overlap borders */
}

.tab-button:first-child {
  margin-right: 0;
}

.tab-button:hover {
  background-color: var(--color-cendre-20);
  border-color: var(--color-cendre-20);
  z-index: 1;
}

.tab-button.active {
  background-color: var(--color-cendre-20);
  border-color: var(--color-cendre-20);
  z-index: 2;
}

/* Tab indicator (colored dot) */
.tab-indicator,
.card-indicator {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}

/* Color variants for indicators */
.tab-button[data-color="green"] .tab-indicator {
  background-color: var(--color-green);
}

.tab-button[data-color="veronica"] .tab-indicator {
  background-color: var(--color-veronica);
}

.tab-button[data-color="pumpkin"] .tab-indicator {
  background-color: var(--color-pumpkin);
}

.tab-label {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 16px;
  letter-spacing: var(--letter-spacing-tight);
}

/* === TAB NAVIGATION - MOBILE/TABLET DROPDOWN === */

.tabs-nav-mobile {
  display: none;
  position: relative;
}
.dropdown-indicator {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dropdown-indicator.indicator-green {
  background-color: var(--color-green);
}

.dropdown-indicator.indicator-veronica {
  background-color: var(--color-veronica);
}

.dropdown-indicator.indicator-pumpkin {
  background-color: var(--color-pumpkin);
}

.dropdown-label {
  flex: 0 1 auto;
  text-align: left;
}

.dropdown-arrow {
  flex-shrink: 0;
  transition: transform 0.3s ease;
  color: var(--color-old-lace);
}

.tabs-dropdown-toggle[aria-expanded="true"] .dropdown-arrow {
  transform: rotate(180deg);
}

/* Dropdown menu */
.tabs-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background-color: var(--color-cendre);
  border: 1px solid var(--color-cendre-20);
  border-radius: var(--radius-md);
  overflow: hidden;
  z-index: 100;
  max-height: 0;
  transition: max-height 0.3s ease;
}

.tabs-dropdown-menu[hidden] {
  display: block;
  visibility: hidden;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 14px 12px 14px;
  border: none;
  background-color: var(--color-cendre);
  color: var(--color-old-lace);
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 16px;
  letter-spacing: var(--letter-spacing-tight);
  cursor: pointer;
  text-align: left;
  transition: background-color 0.2s ease;
}

.dropdown-item:hover {
  background-color: var(--color-cendre-20);
}

.dropdown-item.active {
  background-color: var(--color-cendre-20);
  color: var(--color-old-lace);
}

.dropdown-item .tab-indicator {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dropdown-item[data-color="green"] .tab-indicator {
  background-color: var(--color-green);
}

.dropdown-item[data-color="veronica"] .tab-indicator {
  background-color: var(--color-veronica);
}

.dropdown-item[data-color="pumpkin"] .tab-indicator {
  background-color: var(--color-pumpkin);
}

/* === TAB PANELS (CONTENT) === */

.tabs-content {
  position: relative;
  min-height: 400px;
  max-width: 1224px;
  width: 100%;
}

.tab-panel {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.tab-panel.active {
  display: block;
  opacity: 1;
}

/* Background colors for panels */
/* .tab-panel[data-bg-color="green"] {
    background-color: var(--color-green);
  }

  .tab-panel[data-bg-color="veronica"] {
    background-color: var(--color-veronica);
  }

  .tab-panel[data-bg-color="pumpkin"] {
    background-color: var(--color-pumpkin);
  } */
.tab-panel-placeholder {
  color: var(--color-old-lace);
  min-height: 400px;
}

.tab-panel-placeholder h3 {
  color: var(--color-old-lace);
  margin-bottom: var(--spacing-lg);
}

.tab-panel-placeholder p {
  color: var(--color-old-lace);
}

/* === RESPONSIVE === */

/* Tablet (768px - 1023px): Show dropdown on TOP of image */
@media (min-width: 768px) and (max-width: 1023px) {
  .tabs-nav-desktop {
    display: none;
  }
  #tab-panel-3 .h3-main,
  #tab-panel-4 .h3-main {
    white-space: nowrap;
  }
  #tab-panel-4 .mission-description {
    width: 295px;
    margin-bottom: 22px;
  }
  #tab-panel-3 .mission-description {
    width: 80%;
  }
  #tab-panel-3 .mission-main {
    gap: 0px;
  }
  #tab-panel-3 .mission-features {
    margin-left: -40px;
  }
  #tab-panel-4 .mission-features {
    margin-left: -80px;
  }
  .tabs-nav-mobile {
    display: block;
    order: 0; /* Dropdown ở trên */
    margin-bottom: 15px;
    margin-top: 0;
    width: 100;
    max-width: 496px;
    width: 100%;
  }

  .tabs-content {
    order: 1; /* Content ở dưới */
  }
}
@media (max-width: 1023px) {
  .mission-features .btn__text {
    font-size: 14px;
  }
}
/* Mobile (<768px): Show dropdown BELOW image */
@media (max-width: 767px) {
  .tabs-nav-desktop {
    display: none;
  }
  .tabs-nav-mobile {
    display: block;
    order: 2; /* Dropdown ở dưới */
    margin-bottom: 0;
    width: 100%;
    margin-top: 20px;
  }

  .tabs-content {
    order: 1; /* Content ở trên */
    margin-bottom: 0;
  }

  .tab-panel-placeholder {
    min-height: 300px;
  }
}
/* ======== SECTION VALUES ======== */
.section-values {
  background-color: var(--color-platre);
  padding: var(--spacing-5xl) 0;
  position: relative;
  overflow: hidden;
}
#sppb-addon-wrapper-de63fe9b-5be3-4840-beba-3384f05c4ed8 {
  /*Form button*/
  z-index: 2;
}
/* Values Wrapper - GRID LAYOUT (3 rows × 12 columns) */
#sppb-addon-wrapper-c1108c72-0734-484f-849b-4751b2f3c0ea {
  position: relative;
}
.values-wrapper {
  display: grid;
  grid-template-columns: repeat(
    12,
    1fr
  ); /* 12-column grid for precise positioning */
  grid-template-rows: auto auto auto; /* Top row | Middle row | Bottom row */
  gap: 20px;
  align-items: center;
  max-width: 1224px;
  margin: 0 auto;
}

/* Center Content */
.values-center {
  text-align: center;
  max-width: 600px;
  grid-column: 5 / 9; /* Columns 5-8 (center 4 columns) */
  grid-row: 2; /* Middle row */
  z-index: 10;
  padding: var(--spacing-xl);
}

.values-center h2 {
  margin-bottom: var(--spacing-lg);
  color: var(--color-cendre);
}

.values-center p {
  margin-bottom: var(--spacing-xl);
  color: var(--color-cendre-30);
}

.highlight {
  position: relative;
  display: inline-block;
  padding: 4px;
  font-style: italic;
}

.highlight::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  animation: highlightColorChange 2s steps(1) infinite;
  transform: skewX(-10deg);
  transition: transform 0.3s ease;
}

@keyframes highlightColorChange {
  0% {
    background-color: var(--color-green);
  }
  33% {
    background-color: var(--color-veronica);
  }
  66% {
    background-color: var(--color-pumpkin);
  }
  100% {
    background-color: var(--color-green);
  }
}
/* === FLIP CARDS === */
.value-card {
  width: 326px;
  height: 219px;
  cursor: pointer;
  position: relative;
}

.value-card__inner {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Slide animation on hover (desktop) */
@media (min-width: 768px) {
  /* Front face KHÔNG di chuyển - đứng yên tại chỗ */

  .value-card:hover .value-card__back {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto; /* Enable clicks khi visible */
    /* Khi hover: slide in ngay (no delay) */
    transition: transform 0.6s ease-in-out 0s, opacity 0.3s ease-in-out 0s;
  }
}
/* Card faces */
.value-card__front,
.value-card__back {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  transition: transform 0.6s ease-in-out;
}

.value-card__front img {
  align-self: flex-end;
  margin-top: -10px;
  margin-right: -10px;
  border-radius: 5px;
  width: 156px;
}
/* Front face */
.value-card__front {
  background-color: var(--color-sable);
  z-index: 1;
  transform: translateX(0);
  justify-content: space-between;
  /* Front face không bao giờ di chuyển */
}
.value-card__title {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 30px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.64px;
  margin: 0;
  display: inline-block;
}

/* Back face */
.value-card__back {
  transform: translateX(-100%);
  display: flex;
  justify-content: space-between;
  z-index: 2; /* Cao hơn front face để overlay lên trên */
  opacity: 0;
  pointer-events: none; /* Không block clicks khi invisible */
  /* Khi unhover: fade out nhanh (0.3s), sau đó slide về (delay 0.3s) */
  transition: transform 0.4s ease-in-out 0.3s, opacity 0.3s ease-in-out 0s;
}

.value-card__description {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 16px;
  letter-spacing: -0.47px;
  margin: 0;
  font-weight: 400;
  text-align: left;
}

/* Color variants */
.value-card[data-color="veronica"] .card-indicator,
.value-card[data-color="veronica"] .value-card__back {
  background-color: var(--color-veronica);
}

.value-card[data-color="green"] .card-indicator,
.value-card[data-color="green"] .value-card__back {
  background-color: var(--color-green);
}

.value-card[data-color="pumpkin"] .card-indicator,
.value-card[data-color="pumpkin"] .value-card__back {
  background-color: var(--color-pumpkin);
}
.value-card[data-color="veronica"] .value-card__back .card-indicator,
.value-card[data-color="green"] .value-card__back .card-indicator,
.value-card[data-color="pumpkin"] .value-card__back .card-indicator {
  background-color: var(--color-cendre);
}
/* === DESKTOP GRID POSITIONING (3 rows × 12 columns) === */
/* Desktop: Wrapper uses absolute positioning to overlay cards on section */
@media (min-width: 1024px) {
  /* Wrapper overlay positioning */
  #sppb-addon-wrapper-c1108c72-0734-484f-849b-4751b2f3c0ea {
    position: absolute;
    top: 0;
    left: -45px;
    width: 100%;
    pointer-events: none; /* Allow clicks to pass through wrapper to center content */
  }
  .values-wrapper {
    padding-top: 100px;
  }
  /* Re-enable pointer events on cards */
  .value-card {
    pointer-events: auto;
  }

  .value-card__front {
    gap: 20px;
  }
  /* Card 1: Top Left - L'excellence (Veronica/Purple)
      Columns 1-3 */
  .value-card--1 {
    grid-column: 1 / 4;
    grid-row: 1;
    justify-self: start;
    margin-left: var(--spacing-lg);
  }

  /* Card 5: Top Right - La proximité (Green)
      Columns 10-12 */
  .value-card--5 {
    grid-column: 10 / 13;
    grid-row: 1;
    justify-self: end;
    margin-right: var(--spacing-lg);
  }

  /* Card 2: Middle Left - L'expertise (Green)
      Columns 2-4 (indented 1 column from left) */
  .value-card--2 {
    grid-column: 2 / 5;
    grid-row: 2;
    justify-self: end;
  }

  /* Card 4: Middle Right - Le dynamisme (Veronica/Purple)
      Columns 9-11 (indented 1 column from right) */
  .value-card--4 {
    grid-column: 9 / 12;
    grid-row: 2;
    justify-self: start;
  }

  /* Card 3: Bottom Center - La fiabilité (Pumpkin/Orange)
      Columns 5-8 */
  .value-card--3 {
    grid-column: 5 / 9;
    grid-row: 3;
    justify-self: center;
    margin-top: -100px;
  }

  /* Center content được build riêng trên Joomla - không nằm trong grid */
  .values-center {
    display: none;
  }
}

/* === TABLET LAYOUT === */
/* Tablet: Wrapper is normal block (appears after center content built in Joomla) */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Reset absolute positioning from desktop */
  #sppb-addon-wrapper-c1108c72-0734-484f-849b-4751b2f3c0ea {
    position: static;
    width: 100%;
    pointer-events: auto;
  }

  .values-wrapper {
    position: static; /* Normal block flow */
    grid-template-columns: 1fr 1fr; /* 2 columns */
    grid-template-rows: auto auto auto; /* 3 rows (no center row) */
    gap: 10px;
  }

  .value-card {
    width: 100%;
    max-width: 300px;
    height: 200px;
    pointer-events: auto; /* Reset from desktop */
  }

  /* Row 1: Card 1 (left) + Card 2 (right) */
  .value-card--1 {
    grid-column: 1;
    grid-row: 1;
    justify-self: flex-end;
  }

  .value-card--2 {
    grid-column: 2;
    grid-row: 1;
    justify-self: flex-start;
  }

  /* Row 2: Card 3 centered (hourglass middle - đồng hồ cát) */
  .value-card--3 {
    grid-column: 1 / 3;
    grid-row: 2;
    justify-self: center;
  }

  /* Row 3: Card 4 (left) + Card 5 (right) */
  .value-card--4 {
    grid-column: 1;
    grid-row: 3;
    justify-self: flex-end;
  }

  .value-card--5 {
    grid-column: 2;
    grid-row: 3;
    justify-self: flex-start;
  }

  /* Center content không hiển thị - được build riêng trên Joomla */
  .values-center {
    display: none;
  }
}

/* === MOBILE LAYOUT === */
/* Mobile: Wrapper is normal block (appears after center content built in Joomla) */
@media (max-width: 767px) {
  .section-values {
    padding: var(--spacing-3xl) var(--spacing-lg);
  }

  /* Reset absolute positioning from desktop */
  #sppb-addon-wrapper-c1108c72-0734-484f-849b-4751b2f3c0ea {
    position: static;
    width: 100%;
    pointer-events: auto;
  }

  .values-wrapper {
    position: static; /* Normal block flow */
    grid-template-columns: 1fr; /* Single column */
    grid-template-rows: auto; /* Auto rows */
    gap: 10px;
    min-height: auto;
  }

  .value-card {
    width: 326px;
    grid-column: 1; /* All cards in column 1 */
    pointer-events: auto; /* Reset from desktop */
  }

  .value-card__title {
    font-size: 32px;
    line-height: 30px;
  }

  /* Center content không hiển thị - được build riêng trên Joomla */
  .values-center {
    display: none;
  }

  /* Cards stack in DOM order automatically: Card 1 → 2 → 3 → 4 → 5 */

  /* Mobile: Always show back face, hide front face (no tap/hover needed) */
  .value-card__front {
    opacity: 0;
    pointer-events: none;
  }

  .value-card__back {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
    transition: none;
  }
}
@media (max-width: 1023px) {
  .values-wrapper {
    justify-items: center;
  }
}
/* === ANIMATION ENHANCEMENTS === */
/* Entrance animations (optional) */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.value-card {
  animation: fadeInUp 0.6s ease-out backwards;
}

.value-card--1 {
  animation-delay: 0.1s;
}
.value-card--2 {
  animation-delay: 0.2s;
}
.value-card--3 {
  animation-delay: 0.3s;
}
.value-card--4 {
  animation-delay: 0.4s;
}
.value-card--5 {
  animation-delay: 0.5s;
}

.values-center {
  animation: fadeInUp 0.8s ease-out 0.3s backwards;
}
/*========FOOTER ========*/
#sp-footer {
  border-radius: 10px;
}
#sp-footer #sp-footer1 {
  max-width: 100%;
}
#sp-footer .sp-module-title {
  display: none;
}

/* ========================================
    MISSION PANEL STYLES
    Tab content panels for mission section
    ======================================== */

/* Mission Panel Styles */
.mission-panel {
  position: relative;
  width: 100%;
  background-color: #5fc85d;
  border-radius: 10px;
  overflow: hidden;
  padding: 10px;
}

/* Panel color variants */
.mission-panel--green {
  background-color: var(--color-green);
}

.mission-panel--veronica {
  background-color: var(--color-veronica);
}

.mission-panel--pumpkin {
  background-color: var(--color-pumpkin);
}

.mission-badge {
  position: absolute;
  top: 20px;
  left: 20px;
  background-color: #f4f0ea;
  border-radius: 50px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 10;
}

.mission-badge-dot {
  width: 7px;
  height: 7px;
  background-color: #5fc85d;
  border-radius: 50%;
}

/* Badge dot color variants */
.mission-badge-dot--green {
  background-color: #5fc85d;
}

.mission-badge-dot--veronica {
  background-color: #8c52ff;
}

.mission-badge-dot--pumpkin {
  background-color: #ff7a3d;
}

.mission-content {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 20px;
  align-items: stretch;
  justify-content: space-between;
  width: 100%;
}

.mission-main {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 520px;
  width: 520px;
  position: relative;
  padding: 0 0 40px 40px;
  align-self: flex-end;
}

.mission-title-wrapper {
  position: relative;
  display: inline-block;
}
.mission-title-wrapper h3 {
  font-size: 47px;
  font-weight: 400;
  line-height: 45px;
  letter-spacing: -1.41px;
  margin-bottom: 25px;
}
@media (min-width: 768px) {
  .mission-title-wrapper h3 {
    margin-bottom: 30px;
  }
}
@media (min-width: 1023px) {
  .mission-title-wrapper h3 {
    font-size: 80px;
    line-height: 78px;
    letter-spacing: -2.4px;
    margin-bottom: 40px;
  }
}
.mission-description {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mission-description p {
  margin: 0;
  line-height: 16px;
  font-size: 16px;
  max-width: 406px;
}

.mission-features {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.mission-card {
  background-color: #f4f0ea;
  border-radius: 5px;
  padding: 80px 20px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 580px;
  width: 580px;
  height: 587px;
  justify-content: center;
  align-items: center;
}
.case-study {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 406px;
  width: 100%;
}
.case-study h3 {
  margin: 0;
}
.case-study ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
.case-study li {
  line-height: 16px;
  margin-bottom: 0;
  padding-left: 10px;
  position: relative;
}
.case-study li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 3px;
  font-size: 16px;
  line-height: 16px;
  display: block;
}
.case-study p.text-green,
.case-study p.text-veronica,
.case-study p.text-pumpkin {
  margin-bottom: 4px;
}
.mission-feature-item .btn__icon-left,
.mission-feature-item .btn__icon-right {
  padding: 6px 8px;
}
/* Bullet color variants per panel */
.tab-panel[data-bg-color="green"] .case-study li::before {
  color: var(--color-green);
}

.tab-panel[data-bg-color="veronica"] .case-study li::before {
  color: var(--color-veronica);
}

.tab-panel[data-bg-color="pumpkin"] .case-study li::before {
  color: var(--color-pumpkin);
}

.case-study > * {
  margin: 0;
}

.case-study ul {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/*=== TAB PANEL #1 */
#tab-panel-1 .mission-card {
  align-items: flex-start;
}
/*=== TAB PANEL #2 #3 #4 */
#tab-panel-2 .case-study,
#tab-panel-3 .case-study,
#tab-panel-4 .case-study {
  max-width: 264px;
  width: 264px;
}
@media (min-width: 768px) {
  #tab-panel-2 .case-study,
  #tab-panel-3 .case-study,
  #tab-panel-4 .case-study {
    max-width: 512px;
    width: 512px;
    margin: auto;
  }
}
@media (min-width: 1023px) {
  #tab-panel-1 .mission-card {
    align-items: center;
  }
  #tab-panel-2 .case-study,
  #tab-panel-3 .case-study,
  #tab-panel-4 .case-study {
    max-width: 264px;
    width: 264px;
  }
}
/* === TABLET LAYOUT (768px - 1023px) === */
@media (min-width: 768px) and (max-width: 1023px) {
  .mission-panel {
    padding: 20px 10px 10px 10px;
    height: 548px; /* Fixed height for consistent tab heights */
    display: flex;
    flex-direction: column;
  }
  .mission-content {
    justify-content: flex-end;
  }
  .mission-badge {
    display: none;
  }
  .mission-title-wrapper h3 {
    margin-bottom: 14px;
  }
  .mission-content {
    flex-direction: column;
    gap: 30px;
    align-items: center;
    flex: 1; /* Fill remaining space */
  }
  .mission-feature-item .btn__icon-left,
  .mission-feature-item .btn__icon-right {
    display: none;
  }
  .mission-main {
    max-width: 100%;
    width: 100%;
    gap: 35px;
    padding: 0 0 0 20px;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-start;
  }

  .mission-description {
    gap: 10px;
    /* max-height: 80px; Limit description height to prevent overflow */
    overflow: hidden;
  }

  .mission-card {
    width: 100%;
    max-width: 100%;
    height: 296px; /* Fixed height instead of min-height */
    padding: 30px;
    gap: 30px;
    flex-direction: row;
    overflow: hidden; /* Hide overflow content */
  }
}

/* === MOBILE LAYOUT (<768px) === */
@media (max-width: 767px) {
  .mission-panel {
    padding: 40px 10px 5px 10px;
    min-height: auto;
  }

  .mission-badge {
    display: none;
  }
  .mission-feature-item .btn__icon-left,
  .mission-feature-item .btn__icon-right {
    display: none;
  }
  .mission-content {
    flex-direction: column;
    gap: 30px;
    align-items: stretch;
  }

  .mission-main {
    max-width: 100%;
    width: 100%;
    gap: 20px;
    padding: 0 30px 0 20px;
    align-self: center;
  }

  .mission-description {
    gap: 10px;
  }

  .mission-description p {
    font-size: 16px;
    line-height: 16px;
    letter-spacing: -0.48px;
  }

  .mission-features {
    gap: 5px;
  }
  .mission-card {
    width: 100%;
    max-width: 100%;
    padding: 30px;
    gap: 24px;
    min-height: fit-content;
    flex-direction: column;
  }
  #tab-panel-1 .mission-card {
    gap: 40px;
  }
  .case-study {
    gap: 16px;
  }

  .case-study h3 {
    font-size: 32px;
    line-height: 30px;
  }

  .case-study ul {
    padding-left: 0;
    margin: 0;
  }
}
/* === MOBILE AND TABLET LAYOUT (<1023px) === */
@media (max-width: 1023px) {
  .mission-feature-item .btn__text {
    font-size: 14px;
    padding: 5px 12px 7px 12px;
  }
}
/* === DESKTOP HEADER === */
.dlconseil-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  background-color: transparent;
  z-index: 1000;
  transition: all 0.3s ease;
}
/*Hide module title*/
#sp-navbar .sp-module-title {
  display: none;
}
/*Set the whole sp-nav into fixed and z-index2*/
#sp-navbar {
  position: fixed;
  z-index: 2;
  background-color: transparent;
}
.dlconseil-header__container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 16px 24px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

/* Logo */
.dlconseil-header__logo {
  flex-shrink: 0;
  justify-self: start;
}

.dlconseil-header__logo-link {
  display: block;
  text-decoration: none;
}

.dlconseil-header__logo-img {
  height: 63px;
  width: auto;
  display: block;
  background-color: var(--color-platre);
}

.dlconseil-header__logo-placeholder {
  font-family: var(--font-primary);
  font-size: 20px;
  font-weight: 600;
  color: var(--color-cendre, #292929);
  letter-spacing: -0.03em;
}

/* Desktop Navigation */
.dlconseil-header__nav--desktop {
  flex: 1;
  display: flex;
  justify-content: center;
}

.dlconseil-header__nav-list {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.dlconseil-header__nav-item {
  margin: 0;
  padding: 0;
  background-color: var(--color-old-lace);
  border-radius: 50px;
}

.dlconseil-header__nav-link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 11px 14px 12px 14px;
  border-radius: 50px;
  background-color: transparent;
  color: var(--color-cendre, #292929);
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: -0.48px;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.3s ease;
  position: relative;
}

/* Active state - section in view */
.dlconseil-header__nav-link.active {
  color: var(--color-veronica, #9849ff) !important; /*Override Helix ultimate*/
  font-weight: 600;
}

/* Hover state */
.dlconseil-header__nav-link:hover {
  color: var(--color-veronica, #9849ff) !important; /*Override Helix ultimate*/
}

/* Phone Button (Desktop) */
.dlconseil-header__phone--desktop {
  flex-shrink: 0;
  justify-self: flex-end;
}

/* Mobile Menu Toggle (Hidden on Desktop) */
.dlconseil-header__menu-toggle {
  display: none;
}

/* === MOBILE/TABLET BOTTOM NAVIGATION === */
.dlconseil-header__mobile-nav {
  display: none; /* Hidden on desktop */
}

/* === RESPONSIVE BREAKPOINTS === */

/* TABLET & MOBILE (< 1024px) */
@media (max-width: 1023px) {
  /* Desktop header becomes top bar with logo + toggle */
  .dlconseil-header {
    top: 0;
    bottom: auto;
  }

  .dlconseil-header__container
    .dlconseil-header__menu-toggle.dlconseil-header__menu-toggle--mobile {
    display: none;
  }

  /* Hide desktop navigation */
  .dlconseil-header__nav--desktop {
    display: none;
  }

  /* Hide desktop phone button */
  .dlconseil-header__phone--desktop {
    display: none;
  }

  .dlconseil-header__menu-icon {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--color-cendre, #292929);
    transition: all 0.3s ease;
  }

  /* Mobile Navigation - Sticky Bottom */
  .dlconseil-header__mobile-nav {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    background-color: transparent;
    bottom: 0;
    z-index: 999;
    padding: 16px 20px 20px 20px;
  }

  .dlconseil-header__mobile-container {
    display: flex;
    flex-direction: row;
    max-width: 1440px;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
  }

  /* Mobile Phone Button (at top of bottom nav) */
  .dlconseil-header__phone--mobile {
    display: block;
    width: 32px;
    height: 32px;
    padding: 7px;
    border-radius: 100%;
    background-color: var(--color-green);
  }

  .dlconseil-header__phone-btn--mobile {
    width: 100%;
    justify-content: center;
    font-size: 16px;
  }

  /* Mobile Navigation List */
  .dlconseil-header__mobile-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: var(--color-old-lace);
    border-radius: 50px;
  }

  .dlconseil-header__mobile-item {
    flex: 1;
    margin: 0;
    padding: 0;
  }

  .dlconseil-header__mobile-link {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 14px;
    border-radius: 50px;
    background-color: var(--color-old-lace, #fff8ef);
    color: var(--color-cendre, #292929);
    font-family: var(--font-primary);
    font-size: 16px;
    line-height: 16px;
    font-weight: 400;
    letter-spacing: -0.42px;
    white-space: nowrap;
    text-decoration: none;
    text-align: center;
    transition: all 0.3s ease;
  }

  .dlconseil-header__mobile-link.active {
    color: var(--color-veronica, #9849ff);
    font-weight: 600;
    border-radius: 50px;
    border: 0.5px solid var(--color-sable);
    background: var(--color-platre);
  }

  .dlconseil-header__mobile-link:hover,
  .dlconseil-header__mobile-link:active,
  .dlconseil-header__mobile-link:focus {
    color: var(
      --color-veronica,
      #9849ff
    ) !important; /*Override Helix ultimate*/
    font-weight: 600;
  }
}

/* MOBILE ONLY (< 768px) */
@media (max-width: 767px) {
  .dlconseil-header__logo-img {
    height: 55px;
  }

  .dlconseil-header__mobile-list {
    gap: 4px;
  }
  .dlconseil-header__mobile-nav {
    bottom: 0;
  }
  .dlconseil-header__mobile-link {
    padding: 10px 12px;
    font-size: 14px;
    line-height: 14px;
  }
}

/* === STICKY HEADER BEHAVIOR === */
.dlconseil-header--sticky {
  position: fixed;
}

/* ===================================
    SERVICES VERTICAL SLIDER
    Based on Figma design with GSAP animation
    =================================== */

/* === SLIDER SECTION === */
.services-slider-section {
  position: relative;
  width: 100%;
  overflow: visible;
}
.services-slider-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
  max-width: 100%;
}

.services-slider-wrapper,
.services-slider-section {
  height: 847px;
  width: 342px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .services-slider-section,
  .services-slider-wrapper {
    height: 602px;
    width: 670px;
  }
  .services-slider-wrapper {
    flex-direction: column-reverse;
  }
}
@media (min-width: 1023px) {
  .services-slider-section,
  .services-slider-wrapper {
    height: 610px;
    width: 1224px;
  }
  .services-slider-wrapper {
    flex-direction: row;
  }
}

/* === SLIDER CONTAINER === */
.services-slider-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  flex: 1;
}

/* Title Variants - Desktop/Tablet vs Mobile */

.service-card__title-wrapper--mobile {
  display: block;
}

.service-card__title-wrapper--desktop {
  display: none;
}
@media (min-width: 1023px) {
  .service-card__title-wrapper--mobile {
    display: none;
  }

  .service-card__title-wrapper--desktop {
    display: block;
  }
}

/* Override grid layout for slider */
.services-slider-container .service-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out;
}

.services-slider-container .service-card.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 2;
}

/* === SLIDER NAVIGATION (Desktop - Right Side) === */
.services-slider-nav {
  display: flex;
  justify-content: center;
  flex-direction: row;
  gap: 5px;
  padding: 0;
  margin: 0;
}
@media (min-width: 1023px) {
  .services-slider-nav {
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 10px;
  }
}
.slider-nav__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  outline: none;
}

.slider-nav__number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 31px;
  height: 31px;
  border-radius: 50%;
  background-color: var(--color-cendre-20);
  font-family: var(--font-primary);
  font-size: 16px;
  padding: 10px;
  font-weight: var(--font-weight-regular);
  color: var(--color-old-lace);
  letter-spacing: var(--letter-spacing-tight);
  transition: all 0.3s ease;
  flex-shrink: 0;
}

/* Active State */
.slider-nav__item--active .slider-nav__number {
  background-color: var(--color-platre);
  color: var(--color-cendre);
}

/* === TABLET LAYOUT (768px - 1023px) === */
@media (min-width: 768px) and (max-width: 1023px) {
  .slider-nav__item {
    flex-direction: column;
    gap: 8px;
  }

  .slider-nav__number {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }

  .slider-nav__label {
    position: static;
    font-size: 14px;
    opacity: 0;
    transform: translateY(5px);
  }

  .slider-nav__item:hover .slider-nav__label,
  .slider-nav__item--active .slider-nav__label {
    opacity: 1;
    transform: translateY(0);
  }

  .services-slider-container .service-card {
    min-height: 500px;
    padding: 0 30px 30px 30px;
  }
}

/* === MOBILE LAYOUT (<768px) === */
@media (max-width: 767px) {
  .services-slider-nav {
    gap: 8px;
  }

  .slider-nav__item {
    padding: 0;
  }

  .slider-nav__number {
    width: 32px;
    height: 32px;
    font-size: 13px;
  }

  .slider-nav__label {
    display: none;
  }
}

/* === SLIDER ANIMATIONS === */
/* Animations handled by base .service-card rules above */

/* === ACCESSIBILITY === */
@media (prefers-reduced-motion: reduce) {
  .services-slider-container .service-card,
  .slider-nav__item,
  .slider-nav__number,
  .slider-nav__label {
    transition: none;
    animation: none;
  }
}

/* === SERVICES DROPDOWN NAVIGATION (Mobile/Tablet) === */
.services-nav-mobile {
  display: none;
  position: relative;
  order: 1;
}

.services-dropdown-toggle,
.tabs-dropdown-toggle {
  display: flex;
  width: 100%;
  color: var(--color-old-lace);
  font-family: var(--font-primary);
  background-color: transparent;
  font-size: 16px;
  line-height: 16px;
  letter-spacing: var(--letter-spacing-tight);
  cursor: pointer;
  border: none;
  align-items: center;
  padding: 0;
}

.services-dropdown-toggle .dropdown-label,
.services-dropdown-toggle .dropdown-arrow,
.tabs-dropdown-toggle .dropdown-label,
.tabs-dropdown-toggle .dropdown-arrow {
  border-radius: var(--radius-full);
  background-color: var(--color-cendre-20);
}
.services-dropdown-toggle .dropdown-label,
.tabs-dropdown-toggle .dropdown-label {
  flex: 1;
  text-align: left;
  font-weight: 400;
  padding: 5px 12px 7px 12px;
}

.services-dropdown-toggle .dropdown-arrow,
.tabs-dropdown-toggle .dropdown-arrow {
  flex-shrink: 0;
  padding: 9px;
  height: 31px;
  width: 31px;
}

.services-dropdown-toggle[aria-expanded="true"] .dropdown-arrow {
  transform: rotate(180deg);
}

.services-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background-color: var(--color-cendre);
  border: 1px solid var(--color-cendre-20);
  border-radius: var(--radius-md);
  overflow: hidden;
  z-index: 100;
  max-height: 0;
  transition: max-height 0.3s ease;
}

.services-dropdown-menu[hidden] {
  display: block;
  visibility: hidden;
}

.services-dropdown-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 14px 12px 14px;
  border: none;
  background-color: var(--color-cendre);
  color: var(--color-old-lace);
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 16px;
  letter-spacing: var(--letter-spacing-tight);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.services-dropdown-menu .dropdown-item:hover {
  background-color: var(--color-cendre-20);
}

.services-dropdown-menu .dropdown-item.active {
  background-color: var(--color-cendre-30);
  font-weight: 500;
}

/* === RESPONSIVE: SERVICES DROPDOWN & NAVIGATION === */

/* Desktop (≥1024px): Show numbered navigation, hide dropdown */
@media (min-width: 1024px) {
  .services-nav-mobile {
    display: none;
  }
}

/* Tablet & Mobile (≤1023px): Show dropdown, hide numbered navigation */
@media (max-width: 1023px) {
  .services-slider-wrapper {
    display: flex;
    flex-direction: column;
  }

  .services-nav-mobile {
    display: block;
    order: 1;
  }

  .services-slider-nav {
    display: none;
  }
}

/* Tablet (768px-1023px): Dropdown BEFORE slider */
@media (min-width: 768px) and (max-width: 1023px) {
  .services-nav-mobile {
    order: 0;
  }

  .services-slider-container {
    order: 1;
  }
}
/* ========================================
    PARALLAX BACKGROUND SYSTEM
    ======================================== */
.parallax-bg-container,
.section-values .parallax-bg-container,
.section-hero .parallax-bg-container {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}
.section-hero .parallax-bg-container {
  width: 100vw;
  left: calc((100vw - 325px) / -2);
}
.section-hero {
  padding-top: env(safe-area-inset-top);
}
@media (min-width: 768px) {
  .section-hero .parallax-bg-container {
    left: calc((100vw - 529px) / -2);
  }
}
@media (min-width: 1023px) {
  .section-hero .parallax-bg-container {
    top: 0;
    left: calc((100vw - 647px) / -2);
  }
}

.section-values .parallax-bg-container {
  inset: 0;
}
.section-values .parallax-bg-container .section-values-bg-1,
.section-values .parallax-bg-container .section-values-bg-2 {
  position: absolute;
  object-fit: cover;
}
@media (max-width: 767px) {
  .section-hero-bg-1 {
    position: absolute;
    top: 230px;
    width: 365px;
    height: 365px;
  }
  .section-hero-bg-2 {
    position: absolute;
    width: 463px;
    height: 463px;
    bottom: 100%;
  }
  .section-values .parallax-bg-container .section-values-bg-1 {
    left: -200px;
    width: 278px;
    height: 278px;
    max-width: 278px;
  }
  .section-values .parallax-bg-container .section-values-bg-2 {
    right: -250px;
    width: 400px;
    height: 400px;
    max-width: 400px;
  }
}
@media (min-width: 768px) {
  .section-hero-bg-1 {
    position: absolute;
    width: 473px;
    height: 473px;
    top: 400px;
    left: -100px;
  }
  .section-hero-bg-2 {
    position: absolute;
    top: 200px;
    right: -170px;
    width: 640px;
    height: 640px;
  }
  .section-values .parallax-bg-container {
    width: 100vw;
  }
  .section-values .parallax-bg-container .section-values-bg-1 {
    width: 473px;
    height: 473px;
    max-width: 473px;
    top: 60px;
    left: -150px;
  }
  .section-values .parallax-bg-container .section-values-bg-2 {
    width: 640px;
    height: 640px;
    max-width: 640px;
    top: -40px;
    right: -150px;
  }
}
@media (min-width: 1023px) {
  .section-hero-bg-1 {
    width: 645px;
    height: 645px;
    top: 300px;
  }
  .section-hero-bg-2 {
    width: 873px;
    height: 873px;
    right: -250px;
    top: 0px;
  }
  .section-values .parallax-bg-container {
    top: 0;
    width: 1440px;
  }
  .section-values .parallax-bg-container .section-values-bg-1 {
    width: 645px;
    height: 645px;
    max-width: 645px;
  }
  .section-values .parallax-bg-container .section-values-bg-2 {
    width: 873px;
    height: 873px;
    max-width: 873px;
    right: -200px;
    top: 280px;
  }
}

#sppb-addon-wrapper-7be7e647-90ea-46b6-8c85-f2b2f62373e0 {
  width: 260px;
}
@media (min-width: 768px) {
  #sppb-addon-wrapper-7be7e647-90ea-46b6-8c85-f2b2f62373e0 {
    width: 303px;
  }
}