:root {
  /* Hero section colors */
  --hero-fg: #241910;
  --hero-bg: #fefbf4;
  
  /* Card section colors */
  --card-bg: #0f0f0f;
  --card-fg: #fff;
  --card-1: #b2b2b2;
  --card-2: #ce2017;
  --card-3: #2f2f2f;
}

a { text-decoration: none !important;}

#content .page-header {
    display: none;
}

.logo-fill {
    fill: #fff !important;
}
.nav {
    position: fixed !important;
    
}
.under {
    text-decoration: underline;
text-decoration-color: #0072c1;
text-decoration-thickness: 6px;
text-underline-offset: 8px;
}

.wavy {
    text-decoration: underline;
text-decoration-color: #ED1E79;
text-decoration-thickness: 5px;
text-underline-offset: 12px;
text-decoration-style: wavy;
}

.nav.nav-invert path.logo-fill  {
  mix-blend-mode: exclusion;
}

header{
    max-width: 95vw !important;
}

#content header.nav .wp-block-group.alignwide {
    margin: 10px 64px !important;
}

#content header.nav .main-nav {
    width: 44% !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}

#content header.nav .main-nav a {
    text-decoration: none !important;
}
#content header.nav .main-logo {
    width: 12% !important;
}

#content header.nav a:hover {
    color: #0072c1 !important;
}

#content header.nav .contact-button a {
    padding: 7px 25px !important;
}

#content header.nav .contact-button a:hover {
    background: #ED1E79 !important;
    color: white !important;
}

#content header.nav ul.services-submenu {
    border-radius: 10px !important;
    width: 240px !important;
}

#content header.nav ul.services-submenu li {
    align-content: flex-end !important;
    border-radius: 9px !important;
}

#content header.nav ul.services-submenu li:hover {
    background: #0072C1 !important;
}

#content header.nav ul.services-submenu li:hover a {
    color: white !important;
}

#content header.nav .nav-mobile {
    display: none;
}
/*
#content header.nav.nav-invert ul.services-submenu li a {
    color: black !important;
    mix-blend-mode: none !important;
}
*/

body {
  font-family: "manrope", sans-serif;
}

h1,h2,h3,h4,h5,h6 {
  font-family: "Safiro", sans-serif !important;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

section {
  position: relative;
  width: 100vw;
  min-height: 100svh;
  overflow: hidden;
}

.hero-wrapper,
.card-wrapper {
    width: 100vw;
  min-height: 100svh;
  position: relative;
}

.card-wrapper {
  margin-top: 0;
}

.outro {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  background-color: var(--hero-bg);
  color: var(--hero-fg);
}

canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-content {
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translateX(-50%);
  transform-style: preserve-3d !important;
  perspective: 1000px !important;
  padding: 0.5rem 0;
}



.header {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  text-align: center;
  color: var(--hero-fg);
  transform-origin: center;
  will-change: transform, opacity;
}

.header h1 {
  width: 50%;
  margin-bottom: 0.5rem;
}

.header p {
  opacity: 0.35;
}

.hero-img-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 65%;
  transform-style: preserve-3d;
  perspective: 1000px;
}

.hero-img {
  position: relative;
  width: 100%;
  height: 100%;
  opacity: 0;
  will-change: transform, opacity;
      object-fit: contain;
    -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.hero-img img {
    object-fit: contain;
    -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Card sections styles */
.card-intro,
.card-outro {
    width: calc(100% - 4rem);
  padding: 2rem;
  background-color: var(--card-bg);
  color: var(--card-fg);

}

.card-intro h1,
.card-outro h1 {
  font-size: 6rem;
  font-weight: 500;
  line-height: 1;
  width: 30%;
  margin: 0 auto;
}

.card-sticky {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  background-color: var(--card-bg);
  color: var(--card-fg);
}

.sticky-header {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.sticky-header h1 {
  position: relative;
  font-size: 4rem;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  will-change: transform, opacity;
  transform: translateY(340px);
  opacity: 0;
}

.card-container {
  position: relative;
  width: 75%;
  display: flex;
  perspective: 1000px;
  will-change: width;
}

.card {
  position: relative;
  flex: 1;
  aspect-ratio: 5/7;
  transform-style: preserve-3d;
  transform-origin: top;
}

#card-1 {
  border-radius: 20px 0 0 20px;
}

#card-3 {
  border-radius: 0 20px 20px 0;
}

.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: inherit;
  overflow: hidden;
}

.card-back {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  transform: rotateY(180deg);
  padding: 2rem;
}

.card-back p {
  font-size: 2rem;
  font-weight: 500;
  line-height: 1;
  text-transform: none;
}

.card-back span {
  position: absolute;
  
  font-weight: 500;
  line-height: 1;
}

#card-1 .card-back {
  background-color: var(--card-1);
  color: var(--card-bg);
}

#card-2 .card-back {
  background-color: var(--card-2);
}

#card-3 .card-back {
  background-color: var(--card-3);
}

@media (max-width: 1000px) {
  .header h1,
    h1 {
    font-size: 1.85rem !important;
      letter-spacing: 0 !important;
  }
    .header h2 { font-size: 1.5rem !important;}
    
#content header.nav .nav-full {
    display: none;
}
    #content header.nav .nav-mobile {
    display: flex;
}

    #content header.nav .main-logo {
    width: 55% !important;
}

    #tc-main-logo-text { margin-left: 5px;
                       margin-top: 5px;}
    
  .nav .nav-links,
  .nav .nav-buttons {
    display: none;
  }

  .header h1,
  .client-logos,
  .hero-img-container {
    width: calc(100% - 2rem);
  }

  .card-intro h1,
  .card-outro h1 {
    width: 100%;
    font-size: 3rem;
  }

  .card-sticky {
    height: max-content;
    padding: 4rem 2rem;
    flex-direction: column;
  }

  .sticky-header {
    position: relative;
    top: 0;
    left: 0;
    transform: none;
    margin-bottom: 4rem;
  }

  .sticky-header h1 {
    opacity: 1;
    font-size: 3rem;
  }

  .card-container {
    width: 100%;
    flex-direction: column;
    gap: 2rem;
  }

  .card {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    border-radius: 20px !important;
  }

  #card-1,
  #card-2,
  #card-3,
  .card-back {
    transform: none;
  }
}

/* ========================================
   CSS WORDPRESS - VERSION PROPRE ET OPTIMISÉE
   À ajouter dans Apparence > Personnaliser > CSS additionnel
   ======================================== */

/* ========== BASE - RESET WORDPRESS ========== */
html, body,
#content, .site-main, .entry-content, main {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.wp-block-group {
  max-width: none !important;
}

.wp-block-group.alignfull, .alignfull {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* CRUCIAL : Forcer tous les containers WordPress à ne pas limiter la largeur */
.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ========== WRAPPERS (hero-wrapper, card-wrapper) ========== */
.hero-wrapper,
.card-wrapper {
  position: relative !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* Tous les enfants directs des wrappers */
.hero-wrapper > .wp-block-group.hero,
.card-wrapper > .wp-block-group {
  overflow: visible !important;
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ========== SECTIONS ========== */
section.hero,
section.outro,
section.card-intro,
section.card-outro {
  position: relative !important;
  width: 100vw !important;
  max-width: 100vw !important;
  min-height: 100vh !important;
  min-height: 100vh !important;
  display: flex;
     justify-content: center !important;
  align-items: center !important;
    overflow: hidden !important;
}

/* Section card-sticky : pinnée par ScrollTrigger */
section.card-sticky {
  position: relative !important;
  width: 100vw !important;
  max-width: 100vw !important;
  min-height: 100vh !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  background-color: #0f0f0f !important;
}

/* Quand pinnée par ScrollTrigger */
section.card-sticky[style*="position: fixed"],
section.card-sticky[style*="position:fixed"] {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 100 !important;
}

/* ========== HERO SECTION ========== */
.hero {
  background-color: #fefbf4 !important;
  position: relative !important;
  width: 100vw !important;
  max-width: 100vw !important;
  min-height: 100vh !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
   
  overflow: hidden !important;
}

/* CRUCIAL : Seulement le wrapper hero à pleine largeur, pas les enfants */
.hero-wrapper > .wp-block-group.hero {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
}

/* Quand hero est pinnée par ScrollTrigger - FORCER FIXED */
.hero[style*="position: fixed"],
.hero[style*="position:fixed"] {
  position: fixed !important;
  width: 100vw !important;
  min-height: 100vh !important;
  top: 0 !important;
  left: 0 !important;
}

/* Canvas - FORCER FIXED quand hero est pinnée */
canvas,
#hero_canvas {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  object-fit: cover !important;
  z-index: 0 !important;
}

.hero[style*="position: fixed"] canvas,
.hero[style*="position:fixed"] canvas,
.hero[style*="position: fixed"] #hero_canvas,
.hero[style*="position:fixed"] #hero_canvas {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
}

/* Quand hero est pinnée */
.hero[style*="position: fixed"] #hero_canvas,
.hero[style*="position:fixed"] #hero_canvas {
  position: fixed !important;
}

/* Hero content */
.hero-content {
  position: absolute !important;
  top: 35% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: auto !important;
  max-width: 90% !important;
   perspective: 1000px !important; /* CRUCIAL pour les effets 3D */
  transform-style: preserve-3d !important;  
  z-index: 5 !important;
  pointer-events: none !important;
}

/* Header dans hero */
.hero .header {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
  width: 100vw !important;
  max-width: 100vw !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 1.5rem !important;
  text-align: center !important;
  will-change: transform, opacity !important;
  z-index: 6 !important;
}

.hero .header h1,
.hero .header h2 {
  margin: 0 !important;
  padding: 0 1rem !important;
}

/* Hero image container - 50% DE LA LARGEUR */
.hero-img-container {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 50% !important;
  max-width: 50% !important;
  will-change: transform, opacity !important;
  z-index: 100 !important;
  pointer-events: auto !important;
}

/* CRUCIAL : Forcer les groupes WordPress à ne pas override */
.hero-img-container.alignwide,
.wp-block-group.hero-img-container {
  width: 65% !important;
  max-width: 65% !important;
}

.hero-img {
  position: relative !important;
  width: 100% !important;
  : 100% !important;
  will-change: transform, opacity !important;
  z-index: 100 !important;
}

.hero-img img,
.hero-img figure,
.hero-img .wp-block-image {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  margin: 0 !important;
  border-radius: 20px !important;
}

/* ========== CARD ANIMATION ========== */
/* CRUCIAL : card-sticky ne doit pas écraser ses enfants */
.card-wrapper > .wp-block-group.card-sticky {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Sticky header */
.sticky-header {
  position: absolute !important;
  top: 7% !important;
  left: 50% !important;
  transform: translate(-50%, 0) !important;
  width: 80% !important;
  max-width: 80% !important;
  background: transparent !important;
  z-index: 20 !important;
  padding: 0 !important;
  margin: 0 !important;
  pointer-events: none !important;
}

.sticky-header h1 {
  text-align: center !important;
  will-change: transform, opacity !important;
    line-height: 1.1 !important;
    text-wrap: balance;
    text-wrap: pretty;
  margin: 0 !important;
  padding: 0 !important;
  color: #fff !important;
}

/* Card container - WIDTH CONTRÔLÉ PAR GSAP */
.card-container {
  position: relative !important;
  width: 85vw; /* Largeur initiale 75% - PAS !important pour laisser GSAP animer */
  max-width: 85vw; /* PAS !important pour laisser GSAP animer */
  height: auto !important;
  display: flex !important;
  flex-direction: row !important;
  gap: 0; /* Gap initial à 0 - PAS !important pour laisser GSAP animer */
  perspective: 1000px !important;
  will-change: width, gap !important;
  margin: 0 auto !important;
  padding: 0 !important;
  z-index: 5 !important;
  align-items: center !important;
  justify-content: center !important;
}

/* CRUCIAL : Empêcher WordPress de forcer width: 100% */
.card-container.alignwide,
.wp-block-group.card-container {
  width: 85vw !important;
  max-width: 85vw !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  background-color: transparent !important; /* Le container doit être transparent */
}

/* Le groupe qui contient card-container doit être centré */
.card-sticky > .wp-block-group.card-container {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Cards */
.card {
  position: relative !important;
  flex: 1 !important;
  min-width: 0 !important; /* Important pour flex */
  aspect-ratio: 5/7 !important;
  transform-style: preserve-3d !important;
  will-change: transform !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important; /* VISIBLE pour voir le flip 3D */
  outline: none !important; /* Éviter les bordures de focus */
  box-shadow: none !important; /* Éviter les ombres qui créent des lignes */
  z-index: 1 !important; /* Z-index par défaut */
  transition: transform 0.3s ease, z-index 0.3s ease !important;
}

/* Priorité fixe pour éviter le flickering : card-3 > card-2 > card-1 */
#card-1 {
  z-index: 1 !important;
}

#card-2 {
  z-index: 3 !important;
}

#card-3 {
  z-index: 2 !important;
}

/* Effet hover sur le verso uniquement */
.card-back:hover {
  cursor: pointer !important;
}

/* Au hover, monter au-dessus */
#card-1:has(.card-back:hover) {
  z-index: 100 !important;
}
/* Au hover, monter au-dessus */
#card-1:has(.card-back:hover) ~ #card-3 {
  z-index: 1 !important;
}

#card-2:has(.card-back:hover) {
  z-index: 100 !important;
}

#card-3:has(.card-back:hover) {
  z-index: 100 !important;
}

/* Initial border-radius pour les cards (GSAP les animera ensuite) */
#card-1 {
  border-radius: 20px 0 0 20px; /* PAS !important pour laisser GSAP animer */
}

#card-2 {
  border-radius: 0; /* PAS !important pour laisser GSAP animer */
  margin-left: -1px; /* Compenser le bug de rendu de 1px */
  background-color: #ffffff !important;
  border-color: var(--wp--preset--color--vivid-purple) !important;
  border-width: 5px !important;
}

#card-3 {
  border-radius: 0 20px 20px 0; /* PAS !important pour laisser GSAP animer */
  margin-left: -1px; /* Compenser le bug de rendu de 1px */
}

/* Forcer les groupes WordPress dans les cartes à ne pas interférer */
.card.wp-block-group {
  display: block !important;
}

/* Les enfants directs des cards */
.card > .wp-block-group {
  position: absolute !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

/* Forcer card-front et card-back en tant que groupes WordPress */
.card > .wp-block-group.card-front,
.card > .wp-block-group.card-back {
  position: absolute !important;
  width: 100% !important;
  height: 100% !important;
  top: 0 !important;
  left: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important; /* Safari */
  border-radius: inherit !important;
  overflow: hidden !important;
}

/* Card-front spécifique */
.card > .wp-block-group.card-front {
  z-index: 2 !important;
  transform: rotateY(0deg); /* PAS !important pour laisser GSAP animer */
  display: block !important;
}

/* Card-back spécifique */
.card > .wp-block-group.card-back {
  z-index: 1 !important;
  transform: rotateY(180deg); /* PAS !important pour laisser GSAP animer */
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  padding: 1rem !important;
}

/* Card faces */
.card-front,
.card-back {
  position: absolute !important;
  width: 100% !important;
  height: 100% !important;
  top: 0 !important;
  left: 0 !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important; /* Safari */
  border-radius: inherit !important;
  overflow: hidden !important;
}

/* Forcer card-front à être visible initialement */
.card-front {
  z-index: 2 !important;
  transform: rotateY(0deg); /* PAS !important pour laisser GSAP animer */
}

/* Forcer card-back à être retourné initialement */
.card-back {
  z-index: 1 !important;
  transform: rotateY(180deg); /* PAS !important pour laisser GSAP animer */
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: end !important;
  text-align: center !important;
  padding: 2rem 2rem 0 2rem !important;
}

.card-front img,
.card-front figure,
.card-front .wp-block-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* FORCER avec IDs pour battre WordPress */
#card-1 .card-front img,
#card-2 .card-front img,
#card-3 .card-front img,
#card-1 .card-front figure,
#card-2 .card-front figure,
#card-3 .card-front figure,
#card-1 .card-front .wp-block-image,
#card-2 .card-front .wp-block-image,
#card-3 .card-front .wp-block-image {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* FORCER les card-front avec IDs */
#card-1 .card-front,
#card-2 .card-front,
#card-3 .card-front {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 2 !important;
  transform: rotateY(0deg); /* PAS !important pour laisser GSAP animer le flip */
}

/* FORCER les card-back avec IDs */
#card-1 .card-back,
#card-2 .card-back,
#card-3 .card-back {
  display: flex !important;
  opacity: 1 !important;
    flex-direction:column ;
  justify-content: space-between;
  visibility: visible !important;
  z-index: 1 !important;
  transform: rotateY(180deg); /* PAS !important pour laisser GSAP animer le flip */
}

/* S'assurer que le card-back n'a PAS d'images mais GARDE le texte */
.card-back img,
.card-back figure,
.card-back .wp-block-image,
#card-1 .card-back img,
#card-2 .card-back img,
#card-3 .card-back img,
#card-1 .card-back figure,
#card-2 .card-back figure,
#card-3 .card-back figure,
#card-1 .card-back .wp-block-image,
#card-2 .card-back .wp-block-image,
#card-3 .card-back .wp-block-image {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  position: absolute !important;
  pointer-events: none !important;
}

.card-back span {
  position: absolute !important;
  top: 1rem !important;
  left: 1rem !important;
  opacity: 1 !important;
    max-width: 100px;
    text-align: left;
  line-height: 0.9 !important;
  display: block !important;
  visibility: visible !important;
}



.card-back h2 {
    font-size: 1.3cqw;
}

.card-back p {
  font-size: 1.1cqw;
  font-weight: 500 !important;
  margin: 0 !important;
    text-wrap: balance;
  display: block !important;
  line-height: 1.2 !important;
  visibility: visible !important;
  position: relative !important;
  z-index: 10 !important;
}

/* ========== ÉDITEUR WORDPRESS ========== */
/* Désactiver les transformations 3D dans l'éditeur pour voir le contenu */
.block-editor-block-list__layout .card-back,
.is-root-container .card-back,
.editor-styles-wrapper .card-back {
  transform: none !important;
  position: relative !important;
  backface-visibility: visible !important;
  -webkit-backface-visibility: visible !important;
}

/* ========== INTRO/OUTRO SECTIONS ========== */
.outro {
  background-color: #fefbf4 !important;
  color: #241910 !important;
}

.card-intro,
.card-outro {
  background-color: #0f0f0f !important;
  color: #fff !important;
}

.tc-partners img {
    max-width: 200px;
}

/* ========== RESPONSIVE - MOBILE ========== */
@media (max-width: 1000px) {
.wp-block-navigation__responsive-container {
    padding: 2rem !important;
}
    
    .card-back span {
  top: 1rem !important;
  left: 1rem !important;
  max-width: 75px;
    text-align: left;
  line-height: 0.7 !important;
  display: block !important;
  visibility: visible !important;
}
  .card-container {
    width: 100% !important;
    flex-direction: column !important;
    gap: 2rem !important;
  }

  .card {
    width: calc(100% - 2rem) !important;
      transform: rotateY(180deg) !important;
    max-width: calc(100% - 2rem) !important;
    margin: 0 0 !important;
    border-radius: 20px !important;
  }

    .card .wp-block-button {
        font-size: 3.5cqw;
    }
    .card-back h2 {
    font-size: 4cqw;
}
.card-back p {
  font-size: 3.5cqw;
  font-weight: 600;
  line-height: 1;
  text-transform: none;
}
  #card-1,
  #card-2,
  #card-3 {
    border-radius: 20px !important;
  }
  
  .sticky-header {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
      flex-direction: row-reverse !important;
    transform: none !important;
    margin-bottom: 4rem !important;
  }
    .card .card-back {
        padding: 1rem !important;
    }
  .sticky-header h1 {
    opacity: 1 !important;
    transform: none !important;
  }

  .hero .header h1 {
    width: calc(100% - 2rem) !important;
  }

  .hero-img-container {
      font-size: 2rem !important;
    width: calc(100% - 2rem) !important;
    max-width: calc(100% - 2rem) !important;
  }
    .tc-partners {
        max-width: calc(100% - 6rem) !important;
    }
  .tc-partners img {
    max-width: 100% !important;
    }
}


/*************************************************/

section h1 .block-line-wrapper,section h2 .block-line-wrapper,
    section p .block-line-wrapper {
  
    }
.align-center { margin: 0 auto !important; text-align: center !important;}
    .block-line-wrapper {
      position: relative;
      width: max-content;
      display: block;
    }

    .block-line {
      position: relative;
      display: block;
    }

    .block-revealer {
      position: absolute;
      top: 0;
      left: 0;
      width: 101%;
      height: 101%;
      pointer-events: none;
      will-change: transform;
      z-index: 1;
    }
    .copy {
      position: relative;
      z-index: 1;
    }