.image-wrapper {
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center; /* Center vertically */
  margin-top: 200px;
  position: relative; /* Needed to position the button relative to the wrapper */
  perspective: 1000px; /* NEW: Enable 3D transforms within this context */
}

.full-width-image {
  width: 1000px; /* Default width for smaller screens */
  height: auto;
  display: block;
  flex-shrink: 0;
}

@media (min-width: 1000px) {
  .full-width-image {
    width: 100% !important; /* Image takes 100% width on screens 950px and wider */
  }
}

/* Styles par défaut pour le bouton (largeur < 1000px) */
.contact-button {
  position: absolute;
  padding: 8px 38px;
  background-color: var(--color-blue-light);
  color: var(--color-white);
  text-decoration: none;
  font-family: Arial, sans-serif;
  font-size: 22px;
  font-weight: bold;
  border-radius: 9999px;
  transition: background-color 0.3s ease, color 0.3s ease, border-radius 0.3s ease, font-size 0.3s ease, padding 0.3s ease, top 0.3s ease; /* Ajout des transitions pour les nouvelles propriétés */
  overflow: hidden;
  z-index: 10;
  top: 200px; /* Positionnement par défaut pour < 1000px */
  left: 50%;
  transform: translate(-50%, -50%);
  isolation: isolate;
}

/* Media query pour les écrans de 1000px et plus */
@media (min-width: 1000px) {
  .full-width-image {
    width: 100% !important; /* L'image prend 100% de la largeur du conteneur */
  }

  .contact-button {
    font-size: 2.85vw; /* Environ 40px à 1400px (40/1400 = 0.0285) */
    padding: 0.6vw 1.78vw; /* Environ 12px 25px à 1400px (12/1400 = 0.0085, 25/1400 = 0.0178) */
    top: 20vw; /* Environ 279px à 1400px (279/1400 = 0.199) ou une valeur fixe qui s'adapte mieux */
    /* Alternative pour 'top' si vous voulez qu'il scale de 200px à 279px */
    /* top: calc(200px + (279 - 200) * ((100vw - 1000px) / (1400 - 1000))); */
    /* Ou, plus simple, utiliser une valeur qui augmente avec la largeur de la vue */
    top: 20vw; /* Cela mettra le bouton à 20% de la largeur du viewport à partir du haut */
    /* Remarque : Pour une position exacte comme 279px à 1400px, top: 20vw; à 1400px (1400 * 0.20 = 280px) est proche. */
    /* Si vous voulez une valeur qui s'adapte plus précisément entre 1000px et 1400px pour 'top',
       vous pourriez utiliser la fonction CSS clamp() ou calc() combinée, ou une autre media query.
       Pour l'instant, 20vw ou une valeur fixe adaptée est plus simple. */
  }

}


.contact-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-red); /* Blue color for hover */
  border-radius: 50px; /* Match button's initial border-radius */
  transform: scale(0); /* Start hidden */
  transition: transform 0.3s ease, background-color 0.3s ease;
  z-index: -1; /* Place behind the text */
}

.contact-button:hover {
  color: white; /* White text on hover */
}

.contact-button:hover::before {
  transform: scale(1); /* Expand on hover */
}

.typewriter-text {
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 1.5em; /* Keep font size as is or adjust for overall size */
  font-weight: lighter; /* Makes the text thinner */
  font-style: italic; /* Entire phrase in italics */
  text-align: center; /* Center the two lines */
  white-space: pre-wrap; /* Allows text to wrap and respects newlines */
  overflow: hidden;
  animation: blink-caret .75s step-end infinite;
  padding: 10px;
}

.typewriter-text span {
  display: block; /* Ensures each span is on its own line */
  line-height: 0em; /* Adjust this value to reduce space between lines. You can use 'em', 'px', or unitless values */
}

.typewriter-text .line-1 {
  display: block;
  margin-bottom: -10px; /* Adjust this negative value as needed */
  /* Or use em if you prefer: margin-bottom: -0.5em; */
}

.typewriter-text .line-2 {
  display: block;
  margin-top: -10px; /* Adjust this negative value to match or be slightly different */
  /* Or use em if you prefer: margin-top: -0.5em; */
}

@media (max-width: 1200px) {
    .typewriter-text {
  font-size: 1em; /* Keep font size as is or adjust for overall size */
}

}

/* --- Info Overlay and Boxes --- */
.info-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
  gap: 30px;
}

.info-box {
  text-align: center;
  background: linear-gradient(180deg, #d8d8d8 0%, #a0a0a0 100%);
  border-radius: 30px;
  padding: 40px 25px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  display: flex; /* Keep flex for direct child `info-box-content` */
  flex-direction: column; /* Keep column for direct child `info-box-content` */
  align-items: center; /* Keep align-items for direct child `info-box-content` */
  justify-content: flex-start; /* Keep justify-content for direct child `info-box-content` */
  height: 800px;
  width: 220px;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
  top: 300px;
  mask-image: linear-gradient(to bottom, black 100%, transparent 90%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 80%);
}

/* NEW: Styles for the inner content wrapper for the scroll effect */
.info-box-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  will-change: transform; /* Performance hint for browsers */
  position: relative; /* Ensure children like number/description are positioned correctly */
}

.info-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Consider using an external SVG or a more efficient pattern for complex backgrounds */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="4" height="4" viewBox="0 0 4 4"><rect fill="%23fff" x="0" y="0" width="1" height="1"/><rect fill="%23fff" x="2" y="2" width="1" height="1"/><rect fill="%23eee" x="1" y="0" width="1" height="1"/><rect fill="%23eee" x="3" y="2" width="1" height="1"/><rect fill="%23ddd" x="0" y="1" width="1" height="1"/><rect fill="%23ddd" x="2" y="3" width="1" height="1"/><rect fill="%23ccc" x="1" y="3" width="1" height="1"/><rect fill="%23ccc" x="3" y="1" width="1" height="1"/></svg>');
  background-size: 4px 4px;
  opacity: 0.1;
  pointer-events: none;
  z-index: 1;
}

.info-box:hover {
  transform: translateY(-5px); /* This hover effect remains on the outer box */
}

.info-box .number {
  color: var(--color-blue-light);
  font-family: 'Open Sans', sans-serif;
  font-size: 4.5em;
  font-weight: 700;
  margin-bottom: 5px;
  line-height: 1;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
  z-index: 2;
  position: relative;
  bottom: 80px; /* Keep positioning relative to its direct parent (`.info-box-content`) */
}

.info-box .description {
  color: var(--color-gray-dark);
  font-family: 'Open Sans', sans-serif;
  font-size: 1.1em;
  line-height: 1.3;
  font-weight: 400;
  margin-top: 5px;
  text-transform: capitalize;
  padding: 0 10px;
  z-index: 2;
  position: relative;
  bottom: 80px; /* Keep positioning relative to its direct parent (`.info-box-content`) */
}

.info-p {
  margin-top: 100px;
}

@media (max-width: 890px) {
  .info-overlay {
    flex-direction: column; /* Stack the items vertically */
    justify-content: center; /* Center the entire stack vertically */
    align-items: center; /* Center items horizontally when stacked */
    gap: 0; /* Remove the gap, we'll use negative margin for overlap */
    overflow-y: auto; /* Add scroll if content exceeds viewport height */
    margin-top: 0; /* Remove the large margin-top here, as the transform on overlay should center it */
    height: auto; /* Allow overlay to adjust its height based on stacked content */
    padding: 20px 0; /* Adjust padding for the overlay */
    margin-top: 300px;
  }

  .info-box {
    width: 80%; /* Make boxes take more width for better readability on smaller screens */
    max-width: 600px; /* Limit max-width to prevent them from becoming too wide on slightly larger small screens */
    height: 400px; /* Adjust height to be a bit shorter to facilitate more overlap */
    padding: 20px; /* Adjust padding for smaller screens */
    top: 0; /* Reset top positioning, as the overlay will manage vertical placement */
    margin-top: -200px; /* THIS IS THE KEY: Negative margin to create overlap */
  }

  /* Optional: Adjust margin for the very first box if you don't want it to overlap "nothing" */
  .info-box:first-child {
    margin-top: 0; /* No overlap for the first box */
  }

  /* Optional: Adjust z-index to control stacking order.
     By default, later elements in HTML appear on top.
     If you want the top-most box to be on top, you might need to reverse z-index.
     For this look, it seems the bottom boxes are on top, so increasing z-index for later elements. */
  .info-box:nth-child(1) { z-index: 3; } /* Example: top box */
  .info-box:nth-child(2) { z-index: 2; } /* Middle box */
  .info-box:nth-child(3) { z-index: 1; } /* Bottom box */


  .info-box .number {
    font-size: 5em; /* Slightly reduce font size for numbers */
    bottom: 70px; /* Adjust positioning */
  }

  .info-box .description {
    font-size: 1em; /* Slightly reduce font size for descriptions */
    bottom: 70px; /* Adjust positioning */
  }
}

/* --- Who Are We Section --- */
.who-are-we-section {
  position: relative;
  bottom: 200px;
}

.who-are-we-header {
  background-color: var(--color-red);
  width: fit-content;
  padding: 10px 20px;
  border-radius: 999px;
  margin-bottom: 30px;
  margin-left: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  padding-left: 40px;
  box-sizing: border-box;
}

.who-are-we-header h2 {
  margin: 0 0 0 100px;
  font-size: 1.5em;
  color: var(--color-white);
}

.who-are-we-section2 {
  position: relative;
  top: 100px;

}

.who-are-we-header2 {
  background-color: var(--color-red);
  width: fit-content;
  padding: 10px 20px;
  border-radius: 999px;
  margin-bottom: 30px;
  /* Align to the right */
  margin-left: auto; /* Pushes the element to the right */
  margin-right: 0; /* Ensures it's flush with the right */
  /* Adjust border-radius for right alignment */
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: 999px; /* Re-add the full radius for the left side */
  border-bottom-left-radius: 999px; /* Re-add the full radius for the left side */
  /* Adjust padding for right alignment */
  padding-right: 40px; /* New padding for the right side */
  padding-left: 20px; /* Reset left padding to default */
  box-sizing: border-box;
}

.who-are-we-header2 h2 {
  /* Remove the left margin that pushed it right when aligned left */
  margin: 0 100px 0 0; /* Adjust margin to push text left inside the header */
  font-size: 1.5em;
  color: var(--color-white);
}

.who-are-we-content {
  display: flex; /* Use flexbox for layout */
  flex-wrap: wrap; /* Allow items to wrap on smaller screens */
  justify-content: center; /* Center content horizontally */
  align-items: flex-start; /* Align items to the top */
  width: 100%;
  max-width: 1200px;
  margin: 0 auto; /* Center the block horizontally */
  height: auto;
  position: relative; /* For absolute positioning of text-block */
}

.text-block {
  background-color: var(--color-blue-light);
  color: var(--color-white); /* Ensure text is visible on dark background */
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  position: absolute;
  top: 70%;
  left: 100px;
  transform: translateY(-50%);
  width: 25%;
  z-index: 2;
  box-sizing: border-box; /* Include padding in width */
}

.text-block p {
  margin-bottom: 15px;
  line-height: 1.6;
  font-size: 1.1em;
}

.text-block p:last-child {
  margin-bottom: 0;
}

.illustration-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%; /* Take full width to control image alignment */
  height: auto;
  position: relative;
  z-index: 1;
}

.illustration-image {
  max-width: 70%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  display: block;
  margin-right: 100px; /* Use margin for spacing */
}

@media (max-width: 1100px) {
  .text-block {
    width: 45%;
    top: 90%;
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Center horizontally */
  }
  .illustration-image {
    margin-right: 0; /* Remove margin to allow centering */
    max-width: 80%; /* Adjust image size */
  }
  .illustration-container {
    justify-content: center; /* Center image */
  }
}

@media (max-width: 890px) {
  .who-are-we-section {
    position: relative;
    bottom: -50px;
  }

  .who-are-we-content {
    flex-direction: column; /* Stack image and text vertically */
    align-items: center; /* Center items when stacked */
  }

  .illustration-container {
    justify-content: center;
    width: 100%;
    margin-bottom: 20px;
  }

  .illustration-image {
    max-width: 90%;
    margin-right: 0;
  }

  .text-block {
    position: static; /* Remove absolute positioning */
    transform: none; /* Remove transform */
    width: 85%;
    margin: 0 auto; /* Center the block */
    padding: 20px;
  }

  .text-block p {
    font-size: 1em;
  }

  .who-are-we-header2 h2 {
  font-size: 1.2em;
  margin: 0 50px 0 0;
}
  .who-are-we-header h2 {
  font-size: 1.2em;
    margin: 0 0 0 100px;
}


}

@media (max-width: 600px) {
  .text-block {
    width: 90%; /* Adjust width for smaller mobiles */
    left: auto; /* Remove left positioning */
    top: auto; /* Remove top positioning */
    margin: 20px auto; /* Add some vertical margin and center */
  }

  .illustration-image {
    max-width: 90%;
  }
}

/* --- Base Styles & General Layout --- */
.collaboration-section {
  padding: 150px 0;
}

.collaboration-grid {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 60px;
  flex-wrap: wrap; /* Allows items to wrap on smaller screens */
}

.column {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* --- Card Styles --- */
.card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: rgba(255, 255, 255, 0.5);
  border-radius: 12px;
  padding: 18px 24px;
  max-height: 50px; /* Consider if this max-height is truly necessary or if content can exceed */
  max-width: 360px;
  transition: transform 0.5s ease, opacity 0.5s ease;
  opacity: 0; /* Initial state for scroll animation */
  transform: translateY(40px); /* Initial state for scroll animation */
  position: relative; /* Needed for `top` property */
  top: 50px; /* Pushes card down, part of initial state for animation */
}

.card h3 {
  font-size: 1rem;
  font-weight: 400;
  margin: 0;
  opacity: 0.9;
  position: relative; /* Needed for `top` property */
  top: 15px; /* Pushes text down inside card */
  font-style: italic;
}

.card .highlight {
  font-size: 1.7rem;
  font-weight: 600;
  margin-top: 2px;
  color: rgb(255, 255, 255);
  position: relative; /* Needed for `top` property */
  top: 15px; /* Pushes text down inside card */
}

/* Gradient for left cards */
.card-left {
  background: linear-gradient(to right, #1e3a5f, rgba(30, 58, 95, 0));
}

/* Gradient for right cards */
.card-right {
  background: linear-gradient(to left, #1e3a5f, rgba(30, 58, 95, 0));
  text-align: right;
  align-items: flex-end; /* Aligns content to the end (right) */
}

/* --- Document/Paper Styles (Center Element) --- */
.document {
  max-width: 500px;
  transition: transform 0.6s ease, opacity 0.6s ease;
  opacity: 0; /* Initial state for scroll animation */
  transform: scale(0.95); /* Initial state for scroll animation */
}

.paper {
  background: #e8f0f8;
  border-radius: 24px;
  padding: 40px;
  position: relative;
  color: #1e2a38;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.15);
  max-width: 500px;
  font-family: 'Georgia', serif;
}

.paper .title {
  text-align: center;
  font-weight: 700;
  letter-spacing: 2px;
  margin-bottom: 30px;
  font-size: 1.5rem;
  color: #0f1b2a;
  text-transform: uppercase;
  font-family: 'Georgia', serif;
}

.doc-list {
  list-style: none;
  padding: 0;
  font-style: italic;
  border-left: 4px solid #a6badc;
  margin-left: 15px;
  font-size: 1.1rem;
  line-height: 1.6;
  color: #2a3a55;
  column-count: 2; /* Two columns for the list */
  column-gap: 30px;
}

.doc-list li {
  padding: 10px 15px;
  border-bottom: 1px solid #d1d9e6;
  font-weight: 500;
}

/* --- Scroll Animation Classes --- */
.scroll-anim {
  will-change: transform, opacity; /* Optimizes for animation performance */
}

.scroll-anim.visible {
  opacity: 1;
  transform: none; /* Resets transform to original state */
}

/* --- Main Content Box (New Section) --- */
.main-content-box {
  background-color: rgba(30, 48, 65, 0.9);
  border-radius: 15px;
  padding: 40px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(52, 152, 219, 0.5);
  max-width: 800px;
  width: 90%; /* Responsive width */
  backdrop-filter: blur(3px);
}

@keyframes fadeInSlideUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Section Header --- */
.section-header {
  display: flex;
  align-items: center;
  gap: 25px;
  margin-bottom: 40px;
  padding-bottom: 15px;
  border-bottom: 2px solid rgba(52, 152, 219, 0.4);
  position: relative;
}

.section-header::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background-color: #3498DB;
  transition: width 0.6s ease-out;
}

.section-header:hover::after {
  width: 100%;
}

.section-header h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 2em;
  color: #ECF0F1;
  margin: 0;
  padding: 0;
  text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4);
  letter-spacing: 1.5px;
  transition: color 0.4s ease-in-out;
}

.section-header h2:hover {
  color: #3498DB;
}

.section-header img {
  height: 45px;
  width: auto;
  filter: drop-shadow(0 0 10px rgba(243, 156, 18, 0.8));
  animation: fadeInScale 1.2s ease-out forwards;
  opacity: 0; /* Initial state for animation */
  transform: scale(0.8); /* Initial state for animation */
}

@keyframes fadeInScale {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* --- Service Description --- */
.service-description {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.2em;
  color: #BDC3C7;
  line-height: 1.8;
  margin-bottom: 40px;
  transition: all 0.4s ease-in-out;
}

/* --- Service List --- */
.service-list ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.service-list li {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.15em;
  color: #DDE1E3;
  padding: 18px 25px 18px 60px;
  margin-bottom: 15px;
  position: relative;
  background-color: rgba(44, 62, 80, 0.6);
  border-radius: 8px;
  border: 1px solid rgba(52, 152, 219, 0.2);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
  transition: all 0.4s ease-in-out;
  backdrop-filter: blur(2px);
}

.service-list li:before {
  content: '✓';
  color: #2ECC71;
  position: absolute;
  left: 25px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: bold;
  font-size: 1.6em;
  filter: drop-shadow(0 0 6px rgba(46, 204, 113, 0.6));
}

.service-list li:hover {
  background-color: rgba(44, 62, 80, 0.8);
  transform: translateX(12px) scale(1.02);
  border-color: #3498DB;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35);
}

/* --- Media Queries for Responsiveness --- */

/* Tablet and smaller desktops */
@media (max-width: 900px) {
  .main-content-box {
    padding: 20px; /* Reduce internal padding */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); /* Slightly less pronounced shadow */
  }
}

/* Common tablet and mobile breakpoint */
@media (max-width: 768px) {
  .collaboration-section {
    max-width: 90%; /* Increased width for better use of space */
    margin: 0 auto;
    padding: 100px 0; /* Adjust padding for mobile */
    position: relative;
    right: 10px;
  }

  .collaboration-grid {
    flex-direction: column; /* Stack items vertically */
    gap: 40px;
    align-items: center;
  }

  .column {
    width: 100%;
    max-width: 100%;
    gap: 30px;
    align-items: center;
  }

  .card {
    width: 90%; /* Cards take up more width */
    max-width: none; /* Override desktop max-width */
    max-height: none; /* Allow height to adjust to content */
    padding: 20px 25px;
    top: 0; /* Remove initial `top` offset for mobile */
    color: rgba(255, 255, 255, 0.8);
    border-radius: 16px;
    text-align: center;
    background: linear-gradient(135deg, #1e3a5fcc, #0f1b2acc); /* Unified background for mobile */
    opacity: 1; /* Ensure cards are visible by default on mobile if JS animation is not used */
    transform: none; /* Remove initial transform for mobile */
  }

  .card h3 {
    font-size: 1.1rem;
    top: 15px; /* Remove `top` offset for mobile */
  }

  .card .highlight {
    font-size: 2rem;
    font-weight: 700;
    top: 15px; /* Remove `top` offset for mobile */
    color: #fff;
  }

  /* Remove specific left/right gradients on mobile as they are now centered */
  .card-left,
  .card-right {
    background: linear-gradient(135deg, #1e3a5fcc, #0f1b2acc);
    text-align: center;
    align-items: center;
  }

  .document {
    max-width: 90%;
    padding: 0 10px;
    margin: 0 auto 40px auto;
    opacity: 1; /* Ensure document is visible by default on mobile */
    transform: none; /* Remove initial transform for mobile */
  }

  .paper {
    max-width: 100%;
    padding: 30px 25px;
    border-radius: 20px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
  }

  .paper .title {
    font-size: 1.3rem;
    margin-bottom: 25px;
    color: #0f1b2a;
  }

  .doc-list {
    column-count: 1; /* Single column for list on mobile */
    border-left: 4px solid #a6badc;
    margin-left: 10px;
    font-size: 1rem;
    line-height: 1.5;
    color: #2a3a55;
    column-gap: unset; /* Remove column gap on single column */
  }

  .doc-list li {
    padding: 8px 12px;
    border-bottom: 1px solid #d1d9e6;
    font-weight: 500;
  }

  /* Main Content Box Responsiveness */
  .main-content-box {
    padding: 20px;
    width: 95%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  }

  .section-header {
    flex-direction: column;
    align-items: flex-start; /* Aligns title and image to the start */
    gap: 15px;
    margin-bottom: 25px;
  }

  .section-header h2 {
    font-size: 1.4em;
    letter-spacing: 1px;
    text-align: center; /* Center the text for mobile */
    width: 100%; /* Ensures centering works */
  }

  .section-header img {
    height: 35px;
    margin-left: auto; /* Center the image */
    margin-right: auto; /* Center the image */
    display: block; /* Important for margin auto to work */
  }

  .section-header:hover::after {
    width: 0%; /* Disable hover animation on mobile for cleaner touch experience */
  }

  .service-description {
    font-size: 1em;
    line-height: 1.6;
    margin-bottom: 25px;
  }

  .service-list li {
    font-size: 1em;
    padding: 15px 20px 15px 50px;
    margin-bottom: 10px;
  }

  .service-list li:before {
    left: 20px;
    font-size: 1.4em;
  }

  .service-list li:hover {
    transform: translateX(5px) scale(1.01);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  }
}

/* Smaller mobile screens (e.g., portrait phones) */
@media (max-width: 480px) {
  .main-content-box {
    padding: 15px;
  }

  .section-header h2 {
    font-size: 1.4em;
  }

  .service-description {
    font-size: 0.95em;
  }

  .service-list li {
    font-size: 0.95em;
    padding: 12px 15px 12px 45px;
  }

  .service-list li:before {
    left: 15px;
    font-size: 1.2em;
  }
}


.values-container {
    display: flex;
    flex-wrap: wrap; /* Allows cards to wrap on smaller screens */
    justify-content: center; /* Center cards horizontally */
    gap: 30px; /* Space between cards */
    max-width: 1200px; /* Max width for content */
    margin: 0 auto; /* Center the container */
    width: 95%;
}

.value-card {
    background-color: rgba(255, 255, 255, 0.05); /* Very subtle transparent background for cards */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle border */
    border-radius: 10px; /* Slightly rounded corners */
    padding: 30px;
    flex: 1; /* Allows cards to grow and shrink */
    min-width: 280px; /* Minimum width before wrapping */
    max-width: 250px; /* Max width for individual cards */
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
}

.value-card:hover {
    transform: translateY(-5px); /* Lift effect on hover */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); /* Enhanced shadow on hover */
}

.value-card h3 {
    font-size: 1.8em;
    color: #ffffff; /* Accent color for headings */
    margin-bottom: 15px;
    font-weight: 600;
}

.value-card p {
    font-size: 1.1em;
    line-height: 1.6;
    color: #c0c0c0; /* Slightly desaturated text color */
}

.value-card p strong {
    color: #f8f8f8; /* Make strong text stand out more */
}

/* --- Responsive Adjustments --- */
@media (max-width: 768px) {

    .values-container {
        gap: 25px; /* Slightly less gap between cards */
    }

    .value-card {
        padding: 25px;
        min-width: 300px; /* Ensure cards are still a decent size on tablets */
        max-width: 100%; /* Allow two cards per row on wider tablets */
        flex-basis: calc(50% - 25px); /* Calculate width for two cards with gap */
    }
}

@media (max-width: 600px) {
    .values-container {
        flex-direction: column; /* Stack cards vertically on smaller phones */
        align-items: center; /* Center stacked cards */
        gap: 20px; /* Reduce gap when stacked */
    }

    .value-card {
        max-width: 90%; /* Allow cards to take up most of the screen width */
        min-width: unset; /* Remove min-width when stacking */
        width: 100%; /* Ensure cards fill available width */
        padding: 20px; /* Slightly less padding for smaller screens */
    }
}

@media (max-width: 480px) {

    .value-card h3 {
        font-size: 1.5em; /* Smaller title font */
        margin-bottom: 10px;
    }

    .value-card p {
        font-size: 1em; /* Standard paragraph size for readability */
    }
}

/* Container for the entire section */
.tradz-section {
    color: #ffffff; /* White text color */
    font-family: Arial, sans-serif; /* A common sans-serif font */
    text-align: center; /* Center align all text content */
    padding: 80px 20px; /* Top/bottom padding and some horizontal padding */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Style for the main text paragraph */
.tradz-section p {
    font-size: 24px; /* Adjust font size as needed */
    line-height: 1.5; /* Spacing between lines of text */
    max-width: 800px; /* Limit the width of the text for readability */
    margin-bottom: 40px; /* Space below the text and above the button */
}

/* Style for the button */
.tradz-section .join-button {
    background-color: var(--color-white); /* Darker blue for the button background */
    color: var(--color-blue); /* White text on the button */
    font-size: 28px; /* Larger font size for the button text */
    font-weight: bold; /* Make the button text bold */
    padding: 20px 60px; /* Padding inside the button */
    border: none; /* No border for the button */
    border-radius: 999px; /* Slightly rounded corners for the button */
    cursor: pointer; /* Indicate it's clickable */
    text-decoration: none; /* Remove underline for links acting as buttons */
    display: inline-block; /* Allows padding and width to be applied correctly */
    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
}

/* Hover effect for the button */
.tradz-section .join-button:hover {
    background-color: var(--color-red); /* Lighter blue on hover */
    color: var(--color-white);
}

@media (max-width: 890px) {
/* Initial state (hidden or transformed) */
.scroll-anim {
  opacity: 0;
  transform: translateY(20px);
  /* Augmentez la durée et essayez une fonction d'amortissement différente */
  transition: opacity 1s ease-in-out, transform 1s ease-in-out;
}

/* Active state (visible and at final position) */
.scroll-anim.active {
  opacity: 1;
  transform: translateY(0);
}

/* Example for cards */
.card-left.scroll-anim {
  transform: translateX(-50px);
  /* Appliquez les mêmes ajustements ici */
  transition: opacity 1s ease-in-out, transform 1s ease-in-out;
}

.card-left.scroll-anim.active {
  transform: translateX(0);
}

.card-right.scroll-anim {
  transform: translateX(50px);
  /* Appliquez les mêmes ajustements ici */
  transition: opacity 1s ease-in-out, transform 1s ease-in-out;
}

.card-right.scroll-anim.active {
  transform: translateX(0);
}

.document.scroll-anim {
  transform: scale(0.9);
  opacity: 0;
  /* Appliquez les mêmes ajustements ici */
  transition: opacity 1s ease-in-out, transform 1s ease-in-out;
}

.document.scroll-anim.active {
  transform: scale(1);
  opacity: 1;
}
}